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.

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

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.

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.

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.

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