Cuando pasamos una función de flecha a un controlador de eventos, es decir, onClick={() => myFunction()} , estamos causando re-procesamientos innecesarios ya que esta es una definición de función.
En su lugar, ¿debería onClick={myFunction.bind(this)} en lugar de la función de flecha cada vez que llamamos a una función en un controlador de eventos y queremos acceder a this ? Dado que solo usa una referencia a la función, no estamos provocando una nueva representación cada vez.
¿Es correcto el entendimiento anterior? Si es así, ¿por qué alguna vez usaríamos una función de flecha como accesorio del controlador de eventos? Parece que desde la introducción de ES6, generalmente no se recomienda usar .bind como lo hacemos aquí, pero dado que no causaría re-renderizaciones innecesarias, ¿no debería ser esta la mejor práctica?
Dado que solo usa una referencia a la función, no estamos provocando una nueva representación cada vez
Te equivocas.
El método de bind devuelve una nueva función (por lo que activará una nueva representación).
Para evitar volver a renderizar, utilice el useCallback .
O, dado que no parece estar haciendo uso de this dentro de myFunction (de lo contrario () => myFunction() lo rompería), simplemente pase myFunction sin crear una nueva función.
onClick={myFunction}