Trabajé con 3 escenarios diferentes para llamar a una función usando el evento onClick, pero nunca estaba seguro de con cuál debería quedarme. Demostraré mi pregunta con un ejemplo básico, pero imaginemos que nuestra tFunction es más complicada que actualizar un estado.
const [state, setState] = useState("");1er escenario:
const tFunction = (e) => { const tValue = e.target.getAttribute("name"); setState(tValue)}; <button name={"some data"} onClick={tFunction}>Press me</button>2do escenario:
const tFunction = (value) => {setState(value)}; <button onClick={() => tFunction("some data")}> Press me </button>3er escenario:
<button onClick={() => setState("some data")}> Press me </button>Mi pregunta es: ¿cuál es el mejor escenario que debo seguir siempre?
El uso de una función de flecha en el procesamiento crea una nueva función cada vez que se procesa el componente, lo que puede romper las optimizaciones basadas en una comparación de identidad estricta.
(De la documentación de React: https://reactjs.org/docs/faq-functions.html )
Por lo tanto, debe ir al primer escenario.
El primer escenario hace que el código se ejecute más rápido y se puede reutilizar para otros botones, por lo que sugiero el primer escenario