Cómo utilizar el gancho useEffect de React

 

 

 

Como utilizar el gancho useeffect de react 1

¡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 useEffectfunció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 componentDidMountlos eventos componentWillUnmounty componentDidUpdate, 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 comocomponentWillUnmount

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:

  1. Introducción a React
  2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
  3. Cómo cambiar el valor de un nodo DOM
  4. 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

 

Como utilizar el gancho useeffect de react 1
Como utilizar el gancho useeffect de react 1

 

 

Update cookies preferences