Cómo Manejar Funciones en Eventos de React Correctamente

---

Al trabajar con eventos en React, es común cometer el error de ejecutar una función inmediatamente en lugar de asignarla correctamente al evento. A continuación, te mostramos una serie de ejemplos prácticos que te ayudarán a entender cuándo y cómo usar funciones de manera adecuada, evitando errores comunes y mejorando el rendimiento de tus componentes.

✅ Se ejecuta solo cuando ocurre el evento.

onClick={() => onSaludo("Urian")}

❌ Se ejecuta inmediatamente al renderizar el componente, causando errores.

onClick={onSaludo("Urian")}

🔹 Diferencia clave entre ambas llamadas

Si la función onSaludo("Urian") se ejecuta inmediatamente, significa que React intentó ejecutar la función al renderizar el componente, lo cual no es correcto.

📌 ¿Cuándo usar cada uno?

✅ Usar onClick={funcion} cuando NO hay argumentos

Si la función no necesita parámetros, puedes pasarla directamente:

<button onClick={handleClick}>Haz clic</button>

Esto es válido porque handleClick es solo la referencia a la función, sin ejecutarla.

✅ Usar onClick={() => funcion(argumentos)} cuando SÍ hay argumentos

Si la función requiere argumentos, usa una función anónima:

<button onClick={() => onSaludo("Urian")}>Saludar</button>

Así, la función onSaludo("Urian") solo se ejecutará cuando el usuario haga clic.

📌 Ejemplos prácticos

🔹 1️⃣ Error común: Se ejecuta inmediatamente 😵

function App() {
  function onSaludo(nombre) {
    alert(`Hola, ${nombre}!`);
  }

  return (
    // ❌ ERROR: Se ejecuta en el render
    <button onClick={onSaludo("Urian")}>Saludar</button> 
  );
}

❌ Aquí, onSaludo("Urian") se ejecuta al renderizar el componente, lo cual es incorrecto.

🔹2️⃣ Solución correcta con función anónima

function App() {
  function onSaludo(nombre) {
    alert(`Hola, ${nombre}!`);
  }

  return (
    // ✅ Se ejecuta solo al hacer clic
    <button onClick={() => onSaludo("Urian")}>Saludar</button> 
  );
}

✅ Aquí, onSaludo("Urian") solo se ejecuta cuando se hace clic.

🔹 3️⃣ Llamar una función sin argumentos

function App() {
  function handleClick() {
    alert("Botón clickeado!");
  }

  return (
    // ✅ No necesita argumentos, se pasa directamente
    <button onClick={handleClick}>Clic aquí</button> 
  );
}

✅ Aquí no hay necesidad de usar () => {} porque handleClick no recibe parámetros.

🔹 4️⃣ Pasar parámetros sin ejecutar inmediatamente

function App() {
  function mostrarMensaje(mensaje) {
    alert(mensaje);
  }

  return (
    <>
      <button onClick={() => mostrarMensaje("Hola desde el botón 1!")}>Botón 1</button>
      <button onClick={() => mostrarMensaje("Hola desde el botón 2!")}>Botón 2</button>
    </>
  );
}

✅ Se usa () => mostrarMensaje("mensaje") para evitar la ejecución inmediata.

🎯 Resumen