Descubra para qué es útil el gancho useEffect React y cómo trabajar con él.
Echa un vistazo a miIntroducción a React Hooksprimero, si eres nuevo en ellos.
Un gancho de React que a veces uso esuseEffect
.
import React, { useEffect } from 'react'
Una característica muy importante de Hooks es permitir que los componentes de función tengan acceso a los hooks del ciclo de vida.
Usando componentes de clase puede registrar una función en elcomponentDidMount
,componentWillUnmount
ycomponentDidUpdate
eventos, y estos servirán para muchos casos de uso, desde la inicialización de variables hasta llamadas a API y limpieza.
Los ganchos proporcionanuseEffect()
API. La llamada acepta una función como argumento.
La función se ejecuta cuando el componente se renderiza por primera vez y en cada nueva renderización / actualización posterior. React primero actualiza el DOM, luego llama a cualquier función pasada auseEffect()
. Todo sin bloquear la representación de la interfaz de usuario incluso en el código de bloqueo, a diferencia del antiguocomponentDidMount
ycomponentDidUpdate
, lo que hace que nuestras aplicaciones se sientan más rápidas.
Ejemplo:
const { useEffect, useState } = React
const CounterWithNameAndSideEffect = () => {
const [count, setCount] = useState(0)
const [name, setName] = useState(‘Flavio’)
useEffect(() => {
console.log(Hi </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> you clicked </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">count</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> times
)
})
return (
<div>
<p>
Hi {name} you clicked {count} times
</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
<button onClick={() => setName(name === ‘Flavio’ ? ‘Roger’ : ‘Flavio’)}>
Change name
</button>
</div>
)
}
ReactDOM.render(
<CounterWithNameAndSideEffect />,
document.getElementById(‘app’)
)
Lo mismocomponentWillUnmount
el trabajo se puede lograr opcionalmenteregresandouna función de nuestrouseEffect()
parámetro:
useEffect(() => {
console.log(`Hi ${name} you clicked ${count} times`)
return () => {
console.log(`Unmounted`)
}
})
useEffect()
se puede llamar varias veces, lo cual es bueno para separar la lógica no relacionada (algo que afecta a los eventos del ciclo de vida del componente de la clase).
Desde eluseEffect()
Las funciones se ejecutan en cada nueva renderización / actualización subsiguiente, podemos decirle a React que omita una ejecución, por motivos de rendimiento, agregando un segundo parámetro que es una matriz que contiene una lista de variables de estado a tener en cuenta. React solo volverá a ejecutar el efecto secundario si cambia uno de los elementos de esta matriz.
useEffect(
() => {
console.log(`Hi ${name} you clicked ${count} times`)
},
[name, count]
)
De manera similar, puede decirle a React que solo ejecute el efecto secundario una vez (en el momento del montaje), pasando una matriz vacía:
useEffect(() => {
console.log(`Component mounted`)
}, [])
useEffect()
es ideal para agregar registros, acceder a API de terceros y mucho más.
Ejemplo en Codepen:
Ver la plumaEjemplo de React Hooks # 3 efectos secundariospor Flavio Copes (@flaviocopios) enCodePen.
Tech Wiki Online!