Sé que el componente de reacción representará cada vez que cambie el estado y use la función de memorización de CallBack dependiendo de la matriz de dependencia proporcionada.
Pero si tengo esto:
<input type="text" name="name" value={values.name} onChange={handleChange} /> <input type="text" name="phone" value={values.phone} onChange={handleChange} />¿Cuál es la diferencia entre estas dos implementaciones de handleChange?
const handleChange = e => { setValues(values => ({ ...values, [e.target.name]: e.target.value })) }y
const handleChange = useCallback(e => { setValues(values => ({ ...values, [e.target.name]: e.target.value })) }), [])Fragmento de código necesario en el comentario
const Child = () => { console.log("Child rerendered"); return <div>Hello World </div>; }; export default function App() { const [count, setCount] = useState(0); console.log("Parent rerendered"); return ( <div className="App"> <Child /> <button onClick={() => { setCount((x) => x + 1); }} > {count} </button> </div> ); }La diferencia es que con la segunda usando useCallback , seguirás usando la primera función handleChange que creaste; con el primero en el que no usa useCallback , está creando una nueva función de controlador cada vez. (Técnicamente, crea uno nuevo cada vez en ambos casos, pero useCallback solo devolverá el primero que se crea, porque proporcionó una matriz de dependencia vacía). Más información en la documentación .
No importa mucho cuando se asigna la función de controlador a input u otros elementos HTML nativos, o incluso componentes simples. Si estaba proporcionando esta función de controlador a un componente complejo, podría ser mejor usar useCallback si ese componente complejo optimiza la nueva representación (por ejemplo, con React.memo , PureComponent o shouldComponentUpdate ).