hand Inicio
hand JSBloqs
hand GutenBloqs
Qu茅?
noched铆a

DESARROLLO WEB con
REACT y WORDPRESS

Ap煤ntate a la newsletter (escribo algo de tanto en cuanto)

React hook, useEffect o c贸mo domesticar los rerenders

400 palabras
2 minutos
August 2, 2020
blogjavascript

Con el hook de React useEffect podemos especificar cuando queremos que un c贸digo determinado se ejecute

  • S贸lo una vez
  • S贸lo cada vez que cambie una (o m谩s) variables en concreto

En lugar de ejecutarse a cada renderizado de nuestro componente

  1. Para qu茅 es 煤til el useEffect
  2. C贸mo funciona el useEffect?

Para qu茅 es 煤til el useEffect

Los hooks de React son herramientas muy potentes que nos sirven sobre todo para extraer c贸digo y poder reutilizarlo de manera muy simple y agradable

Pero con el useEffect esta definici贸n se queda corta

El useEffect es la manera que tenemos en React de controlar y decidir cu谩ndo queremos que se ejecute un c贸digo concreto

Mejor lo vemos con un ejemplo

Vamos a introducir un console.log() en un componente que tambi茅n tendr谩 un bot贸n, y cada vez que lo apretemos actualizaremos un contador y esto obligar谩 a React a renderizar el componente otra vez

Y cuando el componente se vuelva a renderizar, el console.log se volver谩 a ejecutar

jsx
import React, { useState } from 'react'
const Button = () => {
console.log('hey yo')
const [counter, setCounter] = useState(0)
return (
<div>
<button onClick={() => setCounter(prev => prev + 1)}>contador: {counter}</button>
</div>
)
}
export default Button
Ver en CodeSandBox

Cada vez que actualizamos el contador el componente Button se vuelve a renderizar y con ello vuelve a ejecutar el console.log

Pero y si queremos que este console.log s贸lo se ejecute una vez y al principio?

Quiz谩s ya nos va bien que cada vez que se apriete el bot贸n se ejecute el console.log, pero a medida que vayamos a帽adiendo complejidad el n煤mero de renderizados crecer谩, y entonces igualmente necesitaremos forzar que ese console.log no se ejecute siempre sino cuando nosotros queramos

C贸mo controlamos qu茅 se ejecuta y cu谩ndo se ejecuta dentro de un componente?

Exacto, con el useEffect

jsx
import React, { useState, useEffect } from 'react'
const Button = () => {
useEffect(() => {
console.log('hey yo')
}, [])
const [counter, setCounter] = useState(0)
return (
<div>
<button onClick={() => setCounter(prev => prev + 1)}>contador: {counter}</button>
</div>
)
}
export default Button
Ver en CodeSandBox

Y aqu铆 puedes ver como el console.log s贸lo se ejecuta una 煤nica vez, y aunque el componente se renderize mil veces s贸lo veremos una orden en la consola

Esto es as铆 porque hemos encapsulado el c贸digo dentro de un useEffect, pero c贸mo funciona?

C贸mo funciona el useEffect?

La funci贸n se especifica as铆

jsx
useEffect(() => {
console.log('hey yo')
}, [])

Por lo tanto, tiene dos argumentos

jsx
useEffect(arg1, arg2)

El primer argumento es una funci贸n, y el c贸digo de dentro ser谩 lo que ejecutemos cuando toque

El segundo argumento define cu谩ndo se ejecutar谩 ese c贸digo, y es un array de dependencias, esto es, todo lo que vaya dentro de ese array, cuando cambie, se volver谩 a ejecutar el c贸digo del useEffect

Por ejemplo, cu谩ntas veces se ejecutar谩 este c贸digo?

jsx
import React, { useState, useEffect } from 'react'
const Button = () => {
const mivariable = 'soy indiferente'
useEffect(() => {
console.log('hey yo')
}, [mivariable])
const [counter, setCounter] = useState(0)
return (
<div>
<button onClick={() => setCounter(prev => prev + 1)}>contador: {counter}</button>
</div>
)
}
export default Button
Ver en CodeSandBox

Las mismas que antes, porque la variable mivariable no cambiar谩 nunca (por lo tanto se ejecuta al principio y nunca m谩s)

Pero y si queremos que se ejecute al apretar otro bot贸n? Pues es lo mismo

jsx
import React, { useState, useEffect } from 'react'
const Button = () => {
const [mivariable, setMivariable] = useState('soy indiferente')
useEffect(() => {
console.log(mivariable)
}, [mivariable])
const [counter, setCounter] = useState(0)
return (
<div>
<button onClick={() => setCounter(prev => prev + 1)}>contador: {counter}</button>
<button onClick={() => setMivariable('ya no')}>console.log('ya no')</button>
<button onClick={() => setMivariable('soy otro')}>console.log('soy otro')</button>
</div>
)
}
export default Button
Ver en CodeSandBox

Al apretar el b贸ton console.log estaremos imprimiendo el console.log, pero si te fijas s贸lo lo har谩 la primera vez, las siguientes no

Esto ocurre porque cuando hacemos un setMivariable('ya no') por segunda vez en realidad no est谩s cambiando el estado (cambiarlo por el mismo contenido es lo mismo que no cambiarlo), por lo que no se ejecuta el useEffect

Por lo tanto y en conclusi贸n, el useEffect es la manera React que tenemos para controlar cu谩ndo se ejecuta un c贸digo determinado

Qu茅 quedar铆a por ver?

  • C贸mo implementar funciones async dentro de useEffect

Y esto irremediablemente nos forzar铆a a hablar de c贸mo utilizar useEffect para desmontar nuestro componente

Queda pendiente

Listos! 馃檵鈥嶁檪锔

Qu茅 tal la entrada?

馃憣 Bien 馃檶馃檶
馃憤 Bien, pero algunas cosas podr铆an explicarse mejor 馃槵
馃し鈥嶁檪锔 Da por sentadas demasiadas cosas 馃槖
馃し鈥嶁檪锔 A ver, hay poca chicha 馃槵
馃し鈥嶁檪锔 Los ejemplos no son muy claros 馃檱鈥嶁檪锔
馃し鈥嶁檪锔 No se entiende, est谩 mal escrito 馃憥
鉁嶏笍 Hay errores, rev铆salo en cuanto puedas 馃檹
Enviar Feedback 鉁嶏笍
El texto est谩 en blanco!
Gracias por enviarme tu opini贸n
馃憤

Si quieres explorar m谩s cursos y m谩s entradas en el blog, los tienes todos en la p谩gina principal, y si el contenido te ha ayudado si lo compartes me ayudas a dar difusi贸n 馃憤

Privacidad
by kuworking.com
[ 2020 >> kuworking ]