Es la diferencia entre:

 const onClick = () => myFunction();

y

 const onClick = myFunction;

Es decir, el primero crea una función (en cada representación) que llama a myFunction sin argumentos cuando se llama (la función contenedora), y la usa como controlador de click . El segundo solo usa myFunction como controlador de click directamente, lo que significa que recibirá el objeto de evento del sistema de eventos sintéticos de React.

Evitar la creación de funciones innecesarias es generalmente algo bueno y puede afectar si el componente al que le está proporcionando la función puede evitar volver a renderizar o no (a través de React.memo o implementando shouldComponentUpdate en un componente de class [directamente o a través PureComponent ] ). (Si le proporciona la misma función de un renderizado al siguiente, tal vez pueda; si proporciona una función diferente en cada renderizado, no puede).

Por lo general, los dos tienen el mismo efecto, pero PUEDE haber diferencias en el contexto de React.

La primera función tendrá una nueva identidad única cada vez que se represente el componente, la segunda puede tener la misma identidad cada vez que se represente el componente, según el aspecto de la definición original de myFunction .

Ejemplo 1:

 const myFunction = () => {} // same referential identity on every render export const Component1 = props => <Button onClick={myFunction} /> // different referential identity on every render export const Component1 = props => <Button onClick={ () => myFunction() } />

Ejemplo2:

 // different referential identity on every render export const Component1 = props => { const myFunction = () => {} return <Button onClick={myFunction} /> } // different referential identity on every render export const Component1 = props => { const myFunction = () => {} <Button onClick={ () => myFunction() } />

Ejemplo3:

 // same referential identity on every render export const Component1 = props => { const myFunction = useCallback(() => {}, []) return <Button onClick={myFunction} /> } // different referential identity on every render export const Component1 = props => { const myFunction = () => {} <Button onClick={ () => myFunction() } />

¿Por qué importa esto? Bueno, cuando React realiza el algoritmo de reconciliación y diferenciación, generará un DOM virtual y luego comparará el DOM virtual anterior con el nuevo resultado. Si los elementos difieren, cambiará los elementos por completo en el DOM real y si los atributos difieren, solo cambiará los atributos del elemento existente correspondiente en el DOM real. Para las funciones, la identidad de la función se usa para determinar si el atributo es el mismo o no.

Cuando se trata de volver a renderizar (por ejemplo, no los cambios resultantes en el DOM sino la generación del DOM virtual en React), también puede desempeñar un papel si se usa React.memo :

Ejemplo 4:

 const myFunction = () => {} const MemoButton = React.memo(Button) // does not trigger MemoButton to rerender when parent rerenders export const Component1 = props => <MemoButton onClick={myFunction} /> // does trigger MemoButton to rerender when parent rerenders export const Component1 = props => <MemoButton onClick={ () => myFunction() } />

Puede haber casos en los que te encuentres con un problema extraño relacionado con el fenómeno anterior, aunque esto es más probable cuando está en juego la identidad de las funciones que devuelven elementos DOM, en lugar de la identidad de las funciones utilizadas como atributos, aunque apuesto hay algún caso de uso para esto, aunque es difícil pensar en un escenario de juguete.

Por definición, no preferiría uno de esos, pero es importante entender la diferencia.

Son iguales en este caso, excepto que myFunction no obtiene el evento de clic porque no lo pasa. Pero digamos que tenía una función genérica y quería pasar más argumentos a myFunction , cuando usaría el primero y darle argumentos adicionales.

La preferencia por el primero o el segundo sin argumentos adicionales o que necesiten un evento de clic es una cuestión de opinión, pero el primero agrega una complejidad innecesaria.