Por ejemplo, la función onChange:
const MyComponent = () => { const onChange = (e) => { doSomething(e.target.value) } return <input onChange={onChange} /> };se recrea en cada cambio. ¿Por qué es eso, por qué la función no puede mantener la referencia original?
Los componentes de la función React son solo funciones que ejecutan cada ciclo de renderizado y devuelven JSX. Entonces, en cada representación hay una constante onChange completamente diferente que contiene una referencia diferente a la función (aunque el comportamiento es el mismo).
Si desea mantener la referencia entre los renderizados, debe usar React.useCallback . Puede encontrar más información al respecto en los documentos de React: https://reactjs.org/docs/hooks-reference.html#usecallback