¿Qué es y cómo funciona useEffect? Hooks de React

Summary

Este video aborda los hooks esenciales en React: useState y useEffect. Se explica cómo useState permite manejar el estado de un componente, mientras que useEffect ejecuta código arbitrario cuando el componente se monta o cuando cambian sus dependencias. A través de ejemplos prácticos, se demuestra cómo utilizar useEffect para realizar tareas como guardar datos, realizar peticiones o suscribirse a eventos del DOM. Se destaca la potencia de useEffect para ejecutar efectos secundarios en respuesta a cambios específicos en el componente, lo que permite un control preciso sobre el ciclo de vida de la aplicación.

Takeaways

• 😃 El hook useState permite tener un estado en el componente React y al cambiar, se vuelve a renderizar el componente reflejando los cambios en la interfaz.
• 🤔 useEffect es un hook importante que permite ejecutar código arbitrario cuando el componente se monta en el DOM y cada vez que cambian las dependencias especificadas.
• 📝 useEffect recibe dos parámetros: una función con el código a ejecutar y una lista de dependencias (opcional).
• ⏱️ Si no se pasa la lista de dependencias, el código dentro de useEffect se ejecutará cada vez que se renderice el componente.
• 🎯 Si se pasa una lista de dependencias vacía ([]), el código dentro de useEffect solo se ejecutará una vez cuando se monta el componente.
• 📈 Si se especifican dependencias, el código dentro de useEffect se ejecutará cuando se montan y cada vez que cambien esas dependencias.
• 💾 useEffect puede ser utilizado para guardar datos en una base de datos, realizar peticiones, guardar información en el localStorage, etc.
• 🔄 useEffect puede ser útil para suscribirse a eventos del DOM, como el resize de la pantalla o el movimiento del mouse.
• 🧑‍💻 Múltiples efectos se pueden tener en un componente utilizando varios useEffect.
• ⚠️ Al montar un componente, los efectos se ejecutan en el orden en que fueron definidos.

Q & A

¿Qué es un Hook en React?

Un Hook en React es una función especial que te permite 'enganchar' (hook) el estado de React y el ciclo de vida desde componentes funcionales. Antes, solo los componentes de clase podían manejar el estado y el ciclo de vida, pero los Hooks permiten utilizar estas características en componentes funcionales.

¿Cuáles son los dos Hooks más importantes en React?

Los dos Hooks más importantes en React son useState y useEffect. useState permite agregar estado a componentes funcionales, mientras que useEffect permite ejecutar efectos secundarios en componentes funcionales basados en cambios en el estado o las props.

¿Qué hace el Hook useEffect?

El Hook useEffect en React permite ejecutar código arbitrario cuando el componente se monta en el DOM y cada vez que cambian las dependencias especificadas. Es un Hook que maneja los efectos secundarios en componentes funcionales.

¿Cómo se especifican las dependencias en useEffect?

Las dependencias en useEffect se especifican pasando un arreglo como segundo argumento a la función useEffect. Este arreglo contiene las variables de las que depende el efecto, y cada vez que alguna de estas variables cambie, se volverá a ejecutar el código dentro de useEffect.

¿Qué sucede si no se pasan dependencias a useEffect?

Si no se pasan dependencias a useEffect, el código dentro de useEffect se ejecutará en cada renderizado del componente. Esto puede causar problemas de rendimiento y bucles infinitos si no se maneja correctamente.

¿Para qué se puede utilizar useEffect?

useEffect se puede utilizar para una variedad de casos de uso, como obtener datos de una API, suscribirse a eventos del DOM, guardar datos en el almacenamiento local, registrar efectos de limpieza (cleanup) cuando el componente se desmonta, y más.

¿Qué es el código arbitrario que se puede ejecutar en useEffect?

El código arbitrario que se puede ejecutar en useEffect es cualquier código JavaScript válido que se desee ejecutar cuando el componente se monta o cuando cambien las dependencias especificadas. Este código puede incluir llamadas a APIs, manipulación del DOM, registro de eventos, etc.

¿Cómo se puede evitar que useEffect se ejecute en el primer renderizado?

Para evitar que useEffect se ejecute en el primer renderizado, se puede pasar un arreglo vacío como segundo argumento a useEffect. De esta manera, el código dentro de useEffect solo se ejecutará cuando cambien las dependencias especificadas en el arreglo.

¿Qué es el efecto de limpieza (cleanup effect) en useEffect?

El efecto de limpieza en useEffect es una función que se puede retornar desde dentro de useEffect. Esta función se ejecutará antes de que el componente se desmonte o antes de que se vuelva a ejecutar el efecto debido a un cambio en las dependencias. Se utiliza para limpiar recursos, cancelar suscripciones, etc.

¿Se pueden tener múltiples instancias de useEffect en un solo componente?

Sí, se pueden tener múltiples instancias de useEffect en un solo componente. Cada instancia de useEffect se ejecutará independientemente según sus dependencias especificadas, lo que permite separar los efectos secundarios por preocupación.

Outlines

00:00

🧮 ¿Qué es el Hook useEffect y su importancia?

Este párrafo explica qué es el Hook useEffect en React, un Hook que permite ejecutar código arbitrario cuando el componente se monta en el DOM y cada vez que cambian las dependencias especificadas. También se menciona que useEffect es el segundo Hook más importante después de useState. Se describe el contrato de useEffect, donde se define una función de callback que contiene el código a ejecutar y opcionalmente una lista de dependencias. Si no se proporciona la lista de dependencias, el código se ejecutará en cada renderizado del componente.

05:02

🔄 Comportamiento de useEffect y manejo de dependencias

Esta sección profundiza en el comportamiento de useEffect y explica cómo manejar las dependencias. Si no se proporcionan dependencias, el efecto se ejecutará en cada renderizado del componente. Si se pasa un arreglo vacío como dependencia, el efecto se ejecutará solo en el montaje inicial del componente. También se puede especificar una lista de dependencias, en cuyo caso el efecto se ejecutará cuando se monten por primera vez y cada vez que cambien esas dependencias. Se proporciona un ejemplo práctico del juego Tic Tac Toe donde se observa el comportamiento de useEffect al cambiar el estado del ganador. Además, se mencionan algunos casos de uso de useEffect, como enviar datos a una base de datos, realizar un seguimiento, recuperar información del almacenamiento local y guardar el estado del juego.

10:03

🤔 Aclaraciones y próximos pasos

En este párrafo, se aclara que solo se puede tener un useEffect, aunque se pueden tener múltiples efectos. También se menciona que se explicará por qué al principio se ejecuta dos veces. Finalmente, se indica que se creará un tercer proyecto para ver la potencia de useEffect y su capacidad para suscribirse a eventos del DOM, como el redimensionamiento de la pantalla o el seguimiento del mouse.

Keywords

💡Hook

Un Hook es una función especial en React que permite a los componentes funcionales acceder a características de ciclo de vida y estado. En el script, se menciona que 'useState' y 'useEffect' son Hooks importantes que permiten tener estado en un componente y ejecutar código cuando el componente se monta o cuando cambian ciertas dependencias respectivamente.

💡useState

Es un Hook en React que permite agregar estado a un componente funcional. Devuelve un array con dos elementos: el valor actual del estado y una función para actualizarlo. En el script, se explica que 'useState' permite tener un estado en el componente que, al cambiar, vuelve a renderizar el componente para reflejar los cambios en la interfaz.

💡useEffect

Es un Hook en React que permite ejecutar código cuando el componente se monta, desmonta o actualiza. Recibe dos parámetros: una función que contiene el código a ejecutar y, opcionalmente, un array de dependencias. En el script, se explica que 'useEffect' permite ejecutar código arbitrario cuando el componente se monta y cada vez que cambian las dependencias que se especifiquen.

💡Dependencias

En el contexto de 'useEffect', las dependencias son valores que, al cambiar, hacen que el efecto se vuelva a ejecutar. Son los elementos que se pasan como segundo argumento al Hook 'useEffect' en forma de array. En el script, se menciona que 'useEffect' se ejecuta cuando se monta el componente y cada vez que las dependencias que le digamos cambien.

💡Renderizar

En React, renderizar es el proceso de generar la representación visual de un componente en el DOM. Cuando el estado o las props de un componente cambian, React vuelve a renderizar el componente para reflejar los cambios en la interfaz de usuario. En el script, se explica que cuando el estado cambia, el componente se vuelve a renderizar para mostrar los cambios.

💡Componente

Un componente en React es una pieza de código reutilizable que encapsula la lógica y la presentación de una parte de la interfaz de usuario. Los componentes pueden ser componentes funcionales o de clase. En el script, se habla de componentes y cómo los Hooks, como 'useState' y 'useEffect', permiten agregar funcionalidad a estos componentes.

💡Montaje

En el ciclo de vida de un componente en React, el montaje se refiere a la fase en la que el componente se crea e inserta en el DOM. 'useEffect' con un array de dependencias vacío se ejecuta solo una vez durante esta fase de montaje. En el script, se explica que 'useEffect' se ejecuta cuando el componente se monta en el DOM.

💡Efecto

En el contexto de React, un efecto se refiere a una operación que se ejecuta después de que un componente se renderiza. Los efectos pueden ser, por ejemplo, suscribirse a un evento, actualizar el DOM o realizar una solicitud a una API. El Hook 'useEffect' se utiliza para administrar estos efectos en componentes funcionales.

💡Suscripción

Suscribirse a un evento o fuente de datos significa registrar una función que se ejecutará cada vez que ocurra ese evento o cambien los datos. En el script, se menciona que 'useEffect' se puede usar para suscribirse a eventos, como cuando cambia el tamaño de la pantalla o se mueve el mouse.

💡Código arbitrario

En el contexto del script, 'código arbitrario' se refiere a cualquier código que el desarrollador quiera ejecutar dentro del efecto proporcionado a 'useEffect'. Es decir, no hay restricciones sobre el tipo de código que se puede incluir en el efecto, siempre que sea código JavaScript válido.

Highlights

El uso del Hook useState nos permite tener un estado en nuestro componente, que al cambiar vuelve a renderizar el componente para reflejar los cambios en la interfaz.

El Hook useEffect es el segundo Hook más importante en React, y nos permite ejecutar código arbitrario cuando el componente se monta en el DOM y cada vez que cambian las dependencias que le indiquemos.

useEffect ejecuta el código que le pasemos como primer argumento, y el segundo argumento opcional es un array de dependencias que determina cuándo se debe volver a ejecutar el código.

Si no se pasa un segundo argumento (array de dependencias), useEffect se ejecutará cada vez que se renderice el componente.

Si se pasa un array vacío como segundo argumento, useEffect se ejecutará solo en la primera renderización.

Podemos pasar un array con valores específicos como dependencias, y useEffect se ejecutará cuando se renderice el componente por primera vez y cuando cambien esos valores.

Un uso común de useEffect es ejecutar efectos secundarios cuando cambien ciertos datos, como enviar trazas, guardar datos en una base de datos o recuperar información del almacenamiento local.

Podemos usar useEffect para guardar la partida cada vez que cambie el turno o el tablero de juego, en lugar de hacerlo de forma imperativa.

useEffect nos permite suscribirnos a eventos del DOM, como cambios en el tamaño de la ventana o movimientos del mouse.

Se explicará por qué useEffect se ejecuta dos veces al principio en algunos casos.

Se puede tener más de un useEffect en un componente.

Se realizará un proyecto práctico para ver la potencia de useEffect y los problemas que pueden surgir.

El código arbitrario que se pasa a useEffect es el código que tú quieras ejecutar, no un código establecido por React.

useEffect se utiliza en el cuerpo del componente y se importa de React al igual que useState.

El Hook useEffect se puede ver como una suscripción a eventos, ya que se ejecuta cuando ocurren ciertos cambios especificados en las dependencias.

Transcripts

hasta ahora hemos visto un Hook que es

el Us State el Us 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 súper importante pero en

realidad que 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 reac es Us effect

qué es lo que hace Joseph bueno

simplemente y esto grábatelo

Joseph 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

usefech

luego puedes tener explicaciones más

grandes pero esa es la explicación corta

y ligera de lo que es el Hook Us 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 Cómo funcionan 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 Us effect Cómo es

el Hulk 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 hud de Us

effects para que veas cómo funciona Qué

problemas puedes tener pero lo más

importante digamos que es 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

Pro vale Imagínate que es código

arbitrario código arbitrario que 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 ría que es el

código que tú quieras el que a ti te dé

la gana Vale entonces

imagínate tenemos un componente ya hemos

visto que para crear un estado tenemos

que llamar use State no y le importamos

de Us State y el Us State 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 primer Hook que hemos visto

cómo es el contrato del US effect el Us

effect se utiliza en el cuerpo de

nuestro componente de esta forma y

tenemos que importarlo igual que el Us

State de react le 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 call to exetu execute y aquí

tendríamos la lista list of dependientes

vale serían estos dos parámetros Así que

el Call to execute 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 Us effect 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

dependencias aquí lo que se le tiene que

pasar es una red 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

renderiza el componente esto se va a

ejecutar esto de aquí dentro entonces

veremos que en el conson lock 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 nuestro proyecto que acabamos de

hacer por ejemplo este de del Tic Tac

toe vamos a poner aquí un Us effect

simple y sencillo vamos a poner un Us

effect vamos a traernos el Us effect y

vamos a hacer aquí Us effect vale voy a

poner el Us effect donde hemos dicho que

tiene el josep en el cuerpo no y aquí

tenemos que ponerle el código que

queremos ejecutar Aquí vamos a poner Us

effect no le vamos a pasar el segundo

parámetro por ahora que tendría que ser

una rey pero es opcional por lo tanto

este usa effects debería ejecutarse cada

vez que se renderiza nuestro componente

Vale pues vamos a levantar Aquí vamos a

reiniciar Bueno claro que tiene la

partida guardada vamos a reiniciar voy a

inspeccionar y vamos a ver vale ya veis

que el Us effects ha ejecutado dos veces

Bueno vamos a jugar a ver qué pasa le

doy aquí una vez se ha ejecutado otra

vez y Us effect otra vez Us effect Us

effect Por qué pasa esto porque cada vez

que actualizamos el estado esto

renderiza nuestro componente y como se

vuelva a renderizar nuestro componente

como este Us effect 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 se realiza

nuestro componente lo tenemos aquí luego

te explicaré por qué nada me reiniciar

tenemos dos y no Uno deberíamos tener

solo uno pero tenemos dos luego te

explico por qué pasa esto pero lo

importante y de que en cuenta ahora es

que cada vez que se renderiza nuestro

componente puedes ver que tenemos un

nuevo Us effect ahora bien Imagínate que

tú solo quieres 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 una raíz vacío lo que va a hacer

nuestro Us effect 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 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 dependencias por

ejemplo quiero que te ejecutes cada vez

que ha cambiado el turno o quiero que te

ejecutes cada vez que cambia el Bol 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 Us effects se ejecuta la

primera vez que se renderiza y cuando

cambia 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 Joseph

porque hemos dicho Oye tiene 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 gana

cambia el ganador es Cuando gana a

alguien y cuando también empezamos de

nuevo si yo lo voy a empezar de nuevo

vas a ver aquí que también pone otra vez

Us effect por qué porque hemos reseteado

Ves Ahora ponen dos antes ponían uno

eran dos Porque ha cambiado el ganador

yo puedo seguir jugando y ahora Plim un

3 y le doy aquí pin 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

ganar guardar en la base de datos Quién

ha sido el ganador de la partida

Imagínate que tienes una partida

multiplayer Oye pues ha ganado este en

el Us effects cada cuando cambie el

Winner diremos a 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 dónde

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 cuando 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 por qué 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

resaze de la pantalla o para seguir una

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

extras extract files to save to storage

vale sincronizamos los cambios No te

preocupes solo se puede tener un Us

effects No te preocupes que eso también

lo vamos a explicar y no se puede tener

un se pueden tener más efectos

obviamente así que no te preocupes que

lo explicaremos venga vamos a crear

nuestro tercer