☝ Por si no entendiste bien por qué a veces enviamos arrow functions y por qué otras veces no, aquí te lo explico:
.
Cualquier evento recibe sí o sí una función, es decir, debemos mandarle sí o sí una función para que React internamente pueda ejecutarla en cuanto dicho eventop ocurre.
.
El asunto, es que tiene que ser sí o sí una función que React pueda ejecutar, por eso no podemos mandar directamente un console.log() ni un alert(), porque aunque ambos son funciones, nosotros estamos ejecutándolas directamente al ponerles los paréntesis, pero nosotros no debemos ejecutarlas, nosotros solo debemos mandarlas y ya React se encargará de ejecutarlas.
.
Es por eso que mandamos arrow functions, porque estas son funciones que React puede ejecutar cuando quiera, y pues dentro de esas arrow functions está el código que queremos ejecutar cuando el evento suceda.
.
onClick={() => alert("React sí puede ejecutar esta arrow function cada que le de la gana OwO")}
.
Sin embargo, recordando que los eventos reciben funciones, yo puedo crear una variable que dentro guarde una función, por ejemplo:
.
const adentroTengoUnaFuncion = () => {
console.log("Hola");
console.log("Soy una función que está siendo guardada dentro de una variable UwU");
}
.
Yo puedo ejecutar esta función sin problemas de esta forma adentroTengoUnaFuncion(), pero también puedo mandarsela a React para que él lo ejecute cuando quiera (en este caso, cuando el evento suceda):
.
onClick={adentroTengoUnaFuncion}
.
Nota como aquí mandamos la función sin paréntesis, esto es porque en el momento en el que le ponemos paréntesis seríamos nosotros quienes ejecutan la función, pero recuerda que nosotros no debemos ejecutar la función, sino React es quien tiene que ejecutarla. ¿Por qué? Pues porque si la ejecutamos nosotros, esta se va a ejecutar justo en el momento que esa línea de código sea leída por nuestra computadora, y nosotros no queremos eso, nosotros queremos que nuestra función se ejecute únicamente cuando el evento suceda, por eso la mandamos sin paréntesis, para que React pueda ejecutarla cuando dicho evento ocurra 😄
.
Peeeeeero, podemos hacer algo genial (y puede ponerse complicado), no veo razón para hacer esto, pero te lo explico por alimentar tu curiosidad jaja:
.
Sí podemos ejecutar nosotros la función 👀… Yo sé, esto es totalmente lo contrario a lo que te acabo de decir, pero checa esto 👇
.
Nosotros sí podemos hacer esto:
.
onClick={adentroTengoUnaFuncion()}
Solamente sí nuestra función está así:
.
const adentroTengoUnaFuncion = () => {
return () => {
console.log("Hola");
console.log("Soy una función que está siendo guardada dentro de una variable UwU");
}
}
.
Wait… what? Es simple 👀 Mi función adentroTengoUnaFuncion está retornando otra función, eso significa que, en el momento que mi código se ejecute, mi función adentroTengoUnaFuncion también se va a ejecutar inmediatamente, pero como esta función está retornando otra función, al final mi evento onClick acabará recibiendo la función que necesita para funcionar!!! OwO
.
¿Por qué haríamos esto? Seguramente tenga algún caso de uso, pero también es interesante saber que se pueden hacer este tipo de cosas UwU
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.