const MyComp = () => <button onClick={() => nagivate('/')}>home</button>Tengo un código arriba donde coloco la función de flecha dentro de mi controlador onClick. Mi colega me pidió que hiciera esto en su lugar:
const MyComp = () => { const handleClick = () => nagivate('/') return <button onClick={handleClick}>home</button> }¿Cuál es el punto de esto? argumenta que podemos tener problemas de rendimiento. Estoy confundido.
Ambas versiones son equivalentes. La función handleClick se redefinirá en cada renderizado. Para mejorar el rendimiento, use useCallback(() => nagivate('/'), [nagivate]) . Entonces la función solo cambiará si cambia la función de navigate .
Si pasa la función anónima como controlador de eventos, provocará el recálculo (recreación) de la función en cada renderizado, lo que obligará al elemento que expuso su evento a volver a renderizar también, ya que "piensa" que se pasa un nuevo controlador debido a la nueva referencia de función de su controlador de eventos anónimos . Si el recálculo de la función afecta el rendimiento de la interfaz de usuario, le sugiero que envuelva el controlador en useCallback y así tendrá una referencia estable de su controlador. Al final, no estoy de acuerdo con su colega en que este (un simple botón) tendrá un impacto en su rendimiento, si lo hace, significa que sus niveles superiores son los que necesitan optimizaciones. Es más limpio pero en cuanto a rendimiento, en este caso concreto, casi no hay diferencia.