Matriz de dependencia en gancho useEffect

May 10 2022
El valor pasado importa más de lo que piensas
Los ganchos de reacción han simplificado la forma en que escribimos código. El gancho useEffect junto con useState ayuda a los componentes funcionales a manejar estados, eliminando la necesidad de componentes de clase.

Los ganchos de reacción han simplificado la forma en que escribimos código. El enlace useEffect junto con useState ayuda a los componentes funcionales a manejar estados, eliminando la necesidad de componentes de clase.

Comprender el gancho useEffect nos ayudará a evitar errores, que podrían mantenernos rascándonos la cabeza durante horas.

Foto de Nick Fewings en Unsplash

Matriz de dependencia

Uno de los argumentos que acepta useEffect , después de la función de devolución de llamada, es la matriz de dependencia. Esta matriz define la lista de variables que, si se modifican, activarán la función de devolución de llamada.

useEffect(() => {
    // Callback function
}, [dependencyArray])

1. Saltarse el argumento:

Podemos omitir pasar el segundo argumento. Si elegimos hacerlo, nuestro enlace activará la función de devolución de llamada en cada nueva representación del componente. Cualquier cambio de estado no relacionado activará la función de devolución de llamada para que se ejecute, provocando errores y comprometiendo el rendimiento.

useEffect(() => {
    // Runs in each re-render of the component
})

Una matriz vacía simplemente significa que no hay dependencias que activen la devolución de llamada dentro de ella. Nuestro código dentro de la devolución de llamada se ejecutará una vez cuando el componente se registre, y eso es todo. El gancho useEffect actúa como el método componentDidMount si se pasa una matriz vacía como matriz de dependencia.

useEffect(() => {
    // Runs only when the component is registered
}, [])

Esta podría ser la forma más común utilizada con useEffect . Pasamos una matriz llena de todas las dependencias que deberían activar la ejecución de la función de devolución de llamada. El cambio en cualquiera de las variables en la lista ejecutará la devolución de llamada.

A menudo, estos incluyen los estados que se han creado mediante useState hook.

const [x, setX] = useState();
const [y, setY] = useState();
useEffect(() => {
    // Runs if x or y changes
}, [x, y])

Esperamos que esto le haya dado más información sobre cómo funciona el gancho useEffect en función de su segundo parámetro, y por qué es importante que lo entendamos.

© Copyright 2021 - 2022 | unogogo.com | All Rights Reserved