Cómo utilizar el gancho useEffect React

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,componentWillUnmountycomponentDidUpdateeventos, 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 antiguocomponentDidMountycomponentDidUpdate, 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 mismocomponentWillUnmountel 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.