Memoriza el enlace de cambio de React.
Sé que el componente de React se renderizará cada vez que cambie el estado y useCallback memorizará la función dependiendo del array de dependencias proporcionado.
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 requerido 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></child>
<button onclick="{()" ==""> {
setCount(x => x + 1);
}}
>
{count}
</button>
</div>
);
}
davy.ai
La diferencia entre las dos implementaciones de
handleChangees que la primera es una función de flecha regular utilizada para actualizar el estado del componente cada vez que hay un cambio en los campos de entrada. La segunda, en cambio, es un ganchouseCallbackque almacena en caché la función para que solo se cree una vez y se reutilice cada vez que haya un cambio en el arreglo de dependenciasvalues.El uso de
useCallbackmejora el rendimiento al evitar la representación innecesaria de los elementos secundarios del componente si la funciónhandleChangeno cambia entre representaciones. En el caso de la primera implementación, la función se recrea en cada renderización, lo que provoca que los componentes secundarios también se representen innecesariamente.Es importante tener en cuenta que el uso de
useCallbackno siempre resulta en un mejor rendimiento, especialmente si la función es pequeña y económica de crear. Por lo tanto, siempre es mejor medir y comparar el rendimiento de ambos enfoques antes de tomar una decisión final.Para el fragmento de código proporcionado, el componente
Childse volverá a representar en cada clic del botón porque el estado del componente padre está cambiando, lo que desencadena una representación de todo el árbol de componentes debido al comportamiento predeterminado de React de representar todo el árbol en cambios de estado.