hasta ahora hemos visto un hook
que es el use state, el use state
nos permite tener un estado
en nuestro componente, un estado que
al cambiar vuelve a renderizar
nuestro componente para reflejar en la interfaz
los cambios, y el use state
es super importante, pero en React
hay un montón de hooks, y cada
hook digamos que tiene un objetivo
distinto, que nos va a permitir
pues hacer que nuestra aplicación
se comporte de forma diferente
y el segundo hook
más importante que tiene React
es use effect
¿qué es lo que hace use effect? bueno
simplemente, y esto, grábatelo
use effect
es un hook que nos permite ejecutar
código arbitrario
cuando el componente se monta
en el DOM, y cada vez que
cambian las dependencias que
nosotros le digamos, eso es
lo que es use effect
luego puedes tener explicaciones más grandes
pero esa es la explicación corta
y ligera de lo que es el hook
use effect, un hook
que nos permite ejecutar código
arbitrario cuando se monta el componente
y cada vez que
las dependencias, y ahora entenderé
ahora verás lo que son las dependencias
como funcionan las dependencias
no te preocupes
las dependencias que nosotros le digamos
cada vez que cambien
le digamos, oye, cuando esto cambie
quiero que vuelvas a ejecutar este código
¿vale? eso es lo que sería
un use effect
¿cómo es el hook use effect?
antes, vamos a hacer un proyecto práctico
para que lo veas muy claro
y vamos a ver algunos problemas
que nos vamos a ir encontrando
con el hook de use effect
para que veas cómo funciona
qué problemas puedes tener
pero
lo más importante
digamos que es su
su contrato
¿no? para que lo veamos
imagínate
que tenemos aquí un componente
ahora te pasa
ahora pongo la pantalla
que no la he puesto todavía
vale
vamos a poner la pantalla
vale
imagínate
¿qué es código arbitrario?
código arbitrario
quiere decir el código
que a ti te dé la gana
eso es lo que significa
código arbitrario
arbitrario es porque es el código
que tú quieras
¿sabes?
es el código que te dé la gana
la gana
o sea, no es un código
que está establecido por RIA
que es el código que tú quieras
el que a ti te dé la gana
¿vale?
entonces
imagínate
que tenemos un componente
ya hemos visto
que para crear un estado
tenemos que llamar
useState
¿no?
y lo importamos
de useState
y el useState
pues tendríamos
el valor inicial
y aquí tendríamos
el valor
y la forma
de actualizar
el valor del estado
vale
esto sería el useState
el primer hook
que hemos visto
¿cómo es el contrato
del useEffect?
el useEffect
se utiliza
en el cuerpo
de nuestro componente
de esta forma
y tenemos que importarlo
igual que el useState
de RIA
lo importaríamos así
y aquí
esto
el hook
como todos los hooks
son funciones
y esta función
recibe
dos parámetros
uno
que sería
el código
para ejecutar
codeToExecute
y aquí
tendríamos
la lista
listOfDependencies
¿vale?
serían estos dos parámetros
así que el codeToExecute
ya sabemos
que va a ser
una función
aquí tendríamos
una función
y aquí
el código
el código
a ejecutar
¿vale?
ya sabemos
que como mínimo
esto
como mínimo
como mínimo
se ejecutará
una vez
como mínimo
siempre el useEffect
se va a ejecutar
una vez
¿por qué?
porque cuando se monta
nuestro componente
se ejecuta
una vez
¿vale?
ahora bien
¿se puede ejecutar
más veces?
se puede ejecutar
más veces
en la lista
de dependencias
aquí lo que se le tiene
que pasar
es un array
pero ojo
este segundo parámetro
es opcional
quiere decir
que puedes
no pasárselo
y si no se lo pasas
lo que quiere decir
es que este código
se va a ejecutar
no una vez
se va a ejecutar
cada vez
que se renderice
el componente
y esto es
será la primera vez
la segunda
la tercera
cada vez que se renderice
el componente
esto se va a ejecutar
esto de aquí dentro
entonces veremos
que en el console.log
vamos a tener
el código a ejecutar
el código a ejecutar
o sea
esto se va a ejecutar
cada vez que se renderice
nuestro componente
y esto lo podemos ver
de forma muy sencilla
porque si vamos
otra vez
a nuestro proyecto
que acabamos de hacer
por ejemplo
este de
del tic-tac-toe
vamos a poner aquí
un useEffect
simple y sencillo
vamos a poner un useEffect
vamos a traernos
el useEffect
y vamos a hacer aquí
useEffect
vale
voy a poner el useEffect
donde hemos dicho
que tenía el useEffect
en el cuerpo
y aquí tenemos que ponerle
el código
que queremos ejecutar
aquí vamos a poner
useEffect
no le vamos a pasar
el segundo parámetro
por ahora
que tendría que ser
un array
pero es opcional
por lo tanto
este useEffect
debería ejecutarse
cada vez que se renderiza
nuestro componente
vale
pues vamos a levantar aquí
vamos a reiniciar
bueno claro
es que tiene la partida guardada
vamos a reiniciar
voy a inspeccionar
y vamos a ver
vale
ya veis que el useEffect
se ha ejecutado
dos veces
bueno
vamos a jugar
a ver qué pasa
le doy aquí una vez
se ha ejecutado otra vez
useEffect
otra vez
useEffect
useEffect
¿por qué pasa esto?
porque cada vez que actualizamos
el estado
esto renderiza
otra vez nuestro componente
y como se vuelve a renderizar
nuestro componente
como este useEffect
le hemos dicho
que no tiene ninguna dependencia
de nada
esto lo que hace
es que se está ejecutando
cada vez
que se renderiza
nuestro componente
cada vez que se renderiza
nuestro componente
lo tenemos aquí
luego te explicaré
por qué
nada más reiniciar
tenemos dos
y no uno
deberíamos tener solo uno
pero tenemos dos
luego te explico
por qué pasa esto
pero lo importante
que tienes que tener en cuenta
ahora
es que cada vez
que se renderiza
nuestro componente
puedes ver
que tenemos
un nuevo useEffect
ahora bien
imagínate
que tú solo quieres
ejecutar el efecto
una vez
o sea
solo quieres ejecutar
código
cuando se monta
por primera vez
el componente
¿cómo lo podemos hacer?
aquí
irían las dependencias
estos son valores
que nosotros queremos decir
cada vez que cambie
este valor
quiero ejecutar
este código de aquí
como mínimo
se ejecuta
una vez
como hemos visto
¿no?
cuando se monta
el componente
vale
si le pasamos
un array vacío
lo que va a hacer
nuestro useEffect
es ejecutar
solo cuando se renderiza
por primera vez
el componente
¿qué quiere decir esto?
pues que por más veces
¿ves?
lo tenemos dos veces
luego te explico
por qué
nada más entrar
aparece dos veces
no te preocupes
es una tontería
muy fácil de entender
pero imagínate
que aquí solo sale una vez
ahora
por más que yo
estoy volviendo
a renderizar
como le he dicho
que oye
no te tienes que fijar
en ninguna cosa
no hay ninguna dependencia
simplemente
solo cuando te renderiza
por primera vez
pues ahí
es cuando te tienes que renderizar
por eso
vemos que esto
no vuelve a ejecutarse
el efecto
¿ok?
pero como vamos a ver
más adelante
aquí podríamos ponerle
una lista de dependencias
por ejemplo
quiero que te ejecutes
cada vez que ha cambiado el turno
o quiero que te ejecutes
cada vez que cambia el board
o cada vez que cambia el board
o el turno
o cada vez que cambia
cuando hay un ganador
de esta forma
este efecto
se va a ejecutar
ahora ya sabemos
que se va a ejecutar
el useEffect
se ejecuta
la primera vez
que se renderiza
y cuando cambie el winner
y lo podemos ver fácilmente
si vamos aquí
¿ves?
se ha ejecutado
por primera vez
si yo me empiezo a jugar
y ahora le doy aquí
otra vez
se ha ejecutado
el useEffect
porque le hemos dicho
oye
ten en cuenta
que quiero que esto
se ejecute
como mínimo
cuando se renderiza
por primera vez
el componente
y además
cada vez
que cambie
el ganador
como cada vez
que cambia el ganador
es cuando gana alguien
y cuando también
empezamos de nuevo
si yo le doy a empezar de nuevo
vas a ver aquí
que también pone otra vez
useEffect
¿por qué?
porque hemos reseteado
¿ves?
ahora pone un 2
antes ponía un 1
ahora un 2
porque ha cambiado el ganador
yo puedo seguir jugando
y ahora
un 3
y le doy aquí
un 4
se ha vuelto a ejecutar
porque hemos cambiado
le hemos dicho
oye
tengo una dependencia
y es que cada vez
que cambie el valor de winner
tienes que ejecutar este código
y tú dirás
¿y esto para qué?
a ver
para un montón de cosas
siempre vamos a querer
en React
ejecutar un efecto
es como le vamos a llamar
ejecutar un efecto
queremos ejecutar efectos
cuando cambie
cierta información en React
por ejemplo
si tenemos un estado
el de winner
y queremos enviar una traza
guardarlo en una base de datos
por ejemplo
queremos guardar
en la base de datos
quien ha sido el ganador
de la partida
imagínate que tienes
una partida multiplayer
oye
pues ha ganado este
en el useEffect
cuando cambie el winner
diremos
ah
pues voy a enviar
una petición
a una base de datos
para decirle
que ha ganado este
o también
nada más renderizar
nuestro componente
para hacer una petición
de datos
o también para hacer
un tracking
o para recuperar
información del local storage
también podríamos decir
oye
cada vez que cambie el board
voy a guardar
esta información
y fíjate en esto
esto es muy interesante
porque
¿qué hemos hecho antes?
¿os acordáis
donde hemos cambiado
donde hemos guardado
el Save Game to Storage?
esto lo hemos hecho
lo hemos hecho
de forma
imperativa
porque realmente
hemos dicho
cuando hace esto
hace esto
no sé qué
vale
pero es que
¿cuándo queremos
que se guarde la partida?
queremos que se guarde
la partida
cuando hay un nuevo turno
por lo tanto
una cosa que podríamos hacer
es decir
ostras
pues queremos que guarde
cambie la partida
cada vez
que tenemos
un nuevo turno
o tenemos
un nuevo board
vamos a decirle
que cambie
que guarde la partida
podríamos hacer esto
guardar un efecto
de que cada vez
que cambie el turno
o el board
que guarde la partida
esto es una cosa
que podríamos hacer
¿no?
guardar la partida
cada vez
que esté cambiando
cada vez que cambie esto
guarda la partida
es lo que le estamos diciendo
es como
si nos estuviéramos
suscribiendo a un evento
¿vale?
muy bien
esto sería un ejemplo
pero vamos a hacer
un proyectito
muy interesante
muy simple
pero que con un efecto
vas a ver la potencia
que tiene
y porque además
es interesante
no solo para
lo que hemos visto
sino también incluso
para suscribirte
a eventos
que son del DOM
como cuando quieres ver
si se está haciendo
un resize de la pantalla
o para seguir
un mouse
y tal
y ahora te explicaré
también
por qué
por qué
haciendo esto
por qué haciendo esto
se ejecuta dos veces
al principio
¿vale?
así que
voy a guardar los cambios
extract
extract files
to save
to storage
¿vale?
sincronizamos los cambios
no te preocupes
solo se puede tener
un use effect
no te preocupes
que eso también
lo vamos a explicar
y no solo se puede tener
un use effect
se pueden tener
más efectos
obviamente
así que
no te preocupes
que lo explicaremos
venga
vamos a crear
nuestro tercer proyecto
no te preocupes
no te preocupes