¡Descubre para qué es útil el gancho useEffect de React y cómo trabajar con él!
Primero, consulta mi introducción a los ganchos de React , si eres nuevo en ellos.
Un gancho de React que uso mucho es useEffect
.
import React, { useEffect } from 'react'
La useEffect
función se ejecuta cuando el componente se renderiza por primera vez y en cada nueva renderización o actualización posterior.
React primero actualiza el DOM y luego llama a la función pasada a useEffect()
.
Ejemplo:
const { useEffect, useState } = Reactconst CounterWithNameAndSideEffect = () = { const [count, setCount] = useState(0) const [name, setName] = useState('Flavio') useEffect(() = { console.log(`Hi ${name} you clicked ${count} 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 )}
SUGERENCIA: si eres un desarrollador veterano de React y estás acostumbrado a
componentDidMount
los eventoscomponentWillUnmount
ycomponentDidUpdate
, esto los reemplaza.
Opcionalmente, puedes devolver una función desde la función que pasas a useEffect()
:
useEffect(() = { console.log(`Hi ${name} you clicked ${count} times`) return () = { console.log(`Unmounted`) }})
El código incluido en esa función que devuelve se ejecutará cuando se desmonte el componente. Fotos Porno y actrices porno
Puedes usar esto para cualquier “limpieza” que necesites hacer.
Para los veteranos, esto es como
componentWillUnmount
useEffect()
se puede llamar varias veces, lo que resulta útil para separar la lógica no relacionada.
Dado que las useEffect()
funciones se ejecutan en cada nueva renderización/actualización posterior, podemos indicarle a React que omita la ejecución de la funció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 uno de los elementos de esta matriz cambia.
useEffect( () = { console.log(`Hi ${name} you clicked ${count} times`) }, [name, count])
De manera similar, puedes indicarle 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`)}, [])
Esto ☝️ es algo que uso todo el tiempo.
Ejemplo en Codepen:
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
Cómo utilizar el gancho useEffect de React
Primero, consulta mi introducción a los ganchos de React , si eres nuevo en ellos. ¡Descubre para qué es útil el gancho useEffect de React y cómo trabajar
programar
es
https://aprendeprogramando.es/static/images/programar-como-utilizar-el-gancho-useeffect-de-react-2044-0.jpg
2024-11-01