Middle
¿Qué reglas existen para escribir hooks en React?
sobes.tech AI
Respuesta de la IA
- Llamar a los hooks solo en el nivel superior de los componentes funcionales o dentro de otros hooks personalizados. No se deben llamar a los hooks en bucles, condiciones o funciones anidadas.
- Llamar a los hooks solo dentro de componentes funcionales de React. No se deben llamar en funciones JavaScript normales o en componentes de clase.
- La representación usando
useCallbackpara memorizar funciones yuseMemopara memorizar cálculos ayuda a optimizar el rendimiento. - Usar
useEffectpara efectos secundarios (cargar datos, suscripciones, etc.), especificando un array de dependencias para controlar la ejecución del efecto. - Mantener el orden de llamada a los hooks en cada renderizado del componente. React confía en este orden para enlazar correctamente el estado y los efectos.
- Usar dependencias estables en los arrays de dependencias de
useEffect,useCallback,useMemo. No pasar objetos o funciones que se crean en cada renderizado sin necesidad. - Crear hooks personalizados para reutilizar la lógica de estado entre componentes. Los nombres de los hooks personalizados deben comenzar con
use.
// Ejemplo correcto: llamar a los hooks en el nivel superior
function MyComponent() {
const [count, setCount] = useState(0); // En el nivel superior
useEffect(() => { // En el nivel superior
document.title = `Has pulsado ${count} veces`;
}, [count]); // Array de dependencias
const handleClick = useCallback(() => { // En el nivel superior
setCount(c => c + 1);
}, []); // Función memoizada
return (
<div>
<p>Has pulsado {count} veces</p>
<button onClick={handleClick}>
Pulsa aquí
</button>
</div>
);
}
// Ejemplo incorrecto: llamar a un hook en una condición
// function MyComponentWithBadHook() {
// if (someCondition) {
// const [count, setCount] = useState(0); // INCORRECTO: llamada en condición
// }
// // ...
// }
// Ejemplo incorrecto: llamar a un hook en un ciclo
// function MyComponentWithAnotherBadHook() {
// for (let i = 0; i < 5; i++) {
// const [value, setValue] = useState(i); // INCORRECTO: llamada en ciclo
// }
// // ...
// }