Cuando se deben realizar efectos secundarios en un componente funcional, se puede utilizar el útil gancho useEffect .
El gancho useEffect toma dos argumentos, una función y una lista de dependencias. Si la función o las dependencias cambian, se llama a la función.
12345678910funciónLibrosList(){const[libros, updateBooks]=React.useState([]);React.useEffect(functioneffectFunction(){if(books){updateBooks([...books,{ nombre:$0027Un nuevo Libro$0027, id:$0027...$0027}]);}},[]);// Esta matriz vacía representa una lista vacía de dependencias...}javascript
El ejemplo anterior introduce el gancho useEffect con una lista de dependencia vacía. Como resultado, este gancho sólo se ejecutará cuando el componente se inicialice. No se ejecutará en ningún otro momento porque no tiene ninguna dependencia que vigilar.
El siguiente ejemplo muestra lo que sucede si se proporciona un valor en la matriz de dependencia:
123456789101112131415functionBooksList(){const[libros, updateBooks]=React.useState([]);const[counter, updateCounter]=React.useState(0);React. useEffect(functioneffectFunction(){if(books){updateBooks([...books,{ nombre:$0027Un nuevo Libro$0027, id:$0027...$0027}]);}},[counter]);constincrementCounter=()= >updateCounter(counter +1);}...}javascript
En este ejemplo, se llamará a la effectFunction cuando el componente se inicialice, y también cada vez que cambie la variable del contador .
Cuando se utiliza el gancho useEffect , es común compararlo con todos los métodos del ciclo de vida de los componentes de la clase. En cambio, debes pensar en el gancho useEffect en términos de cómo quieres que tu estado se vea después de que ciertas variables cambien.
Algunas reglas a tener en cuenta sobre el gancho UseEffect:
- No puedes llamar a un gancho dentro de un condicional;
- Los ganchos deben ser llamados en el mismo orden. Poner el useEffect dentro de un condicional podría romper ese ciclo;
- La función que se pasa el gancho no puede ser una función async, porque las funciones async devuelven implícitamente promesas, y una función useEffect no devuelve nada o una función de limpieza.