Los efectos psicológicos de useEffect

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Hemos estado usando hooks durante un tiempo y con eso también hemos estado usando useEffect en particular y en esto hoy quiero echar un vistazo a las partes más complicadas de useEffect y por qué funcionan de esa manera para que puedas irte con una comprensión súper de cómo funciona toda esta magia.

This talk has been presented at React Summit 2020, check out the latest edition of this React Conference.

FAQ

React Summit es un evento donde se discuten temas relacionados con React, una biblioteca de JavaScript para construir interfaces de usuario.

Durante el Octoberfest del año pasado, se decidió actualizar el código de Code Sandbox para utilizar hooks en lugar de clases, implicando una revisión comunitaria que se extendió más de lo esperado.

La revisión de PRs se prolongó porque inicialmente no se comprendió completamente el uso de useEffect, lo que llevó a problemas y confusiones en el código.

El título de la charla es 'Los efectos psicológicos de useEffect'. Es significativo porque utiliza un juego de palabras para atraer interés, enfocándose en cómo useEffect puede ser complicado de entender y manejar en proyectos de React.

La ponente escribió un libro para explicarse a sí misma los hooks de React, debido a las complicaciones y el tiempo que tomó adaptar todo el código a esta nueva característica.

Se discutió la complejidad de usar correctamente el arreglo de dependencias en useEffect, un aspecto crucial para controlar cuándo y cómo se ejecuta este hook dentro de los componentes de React.

La ponente compartió una broma que dice que 'JS' significa 'Seguridad Laboral', sugiriendo que saber JavaScript es beneficioso para la estabilidad en el empleo debido a su amplio uso y demanda en el desarrollo web.

Sara Vieira
Sara Vieira
26 min
17 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla en React Summit explora el uso de useEffect en React y sus efectos psicológicos. Se adentra en el concepto de los ciclos de vida de los componentes y la flexibilidad de useEffect. La charla también discute el uso de refs para montar y desmontar componentes, así como los efectos de limpieza de la función de retorno. Destaca la importancia de comprender cuándo y cómo se ejecuta useEffect, y proporciona ejemplos de uso de useEffect en diferentes escenarios.

1. React Summit: Mi Experiencia con useEffect

Short description:

Hola a todos, y bienvenidos a React Summit. Espero que se estén divirtiendo hasta ahora. Permítanme compartir una historia de Octoberfest del año pasado. Decidimos actualizar nuestro código a hooks, pero no fue tan fácil como pensábamos. Había cosas que no funcionaban y cosas que funcionaban pero no tenían sentido. Así que empecé a investigar más a fondo el uso de useEffect.

Y como siempre, gracias por ver.

Hola a todos, y bienvenidos a React Summit. Espero que se estén divirtiendo hasta ahora, y espero que disfruten de esta charla que estoy a punto de dar y que no arruine su diversión. Eso sería genial ya que todos estamos atrapados en casa.

OK, me gusta comenzar mis charlas con una historia para que puedan simpatizar conmigo. Y eso es en su mayoría. Y pueden entender que ha visto algunas cosas. Sí. OK. Esta historia se remonta a Octoberfest del año pasado. Así que el año pasado, ya estaba trabajando en Code Sandbox, y tuvimos Octoberfest, que es una gran idea. No me malinterpreten. Amo Octoberfest. Trabajo en un proyecto de código abierto. Así que solo obtengo una camiseta gratis. Eso es lo que significa para mí. Y decidimos que deberíamos actualizar nuestro código a hooks, como teníamos algunas cosas en hooks. Pero todavía teníamos prácticamente todo en clases. Y pensamos, bueno, podemos hacer que la comunidad actualice esto archivo por archivo. Esto suena como una gran idea. No pensamos que se iba a salir de proporción y que todavía estaríamos revisando PRs cuatro meses después. ¿Pero adivinen qué pasó? Todavía estábamos revisando PRs cuatro meses después porque, resulta, no entendíamos useEffect como pensábamos. Pensamos que conocíamos este código, lo editamos en Internet. Pensamos que lo sabíamos. Resulta que no. Y había cosas que simplemente no funcionaban. Y no sabíamos muy bien por qué. Y había cosas que funcionaban pero no tenían sentido. Así que fue cuando empecé a investigar más a fondo el uso de useEffect.

Read also

2. React: Efectos Psicológicos de useEffect

Short description:

Todo nuestro código ahora está en Hooks, pero tomó mucho tiempo. Incluso escribí un libro para explicar Hooks. El título de mi charla es los efectos psicológicos de useEffect. Soy Sarah Vieta, una desarrolladora en Consentbox. Soy de Portugal y me pueden encontrar en Twitter como NikitaFTW. React es JavaScript, y JS significa Seguridad Laboral. ¿Ya estás enganchado?

Así que la buena noticia es que todo nuestro código ahora está en Hooks. Creo. Quiero decir, probablemente hay dos archivos que no están en Hooks. Porque nadie quiere tocarlos. Pero en general, todo nuestro código está en Hooks. La mala noticia es que tomó mucho tiempo. Tomó tanto tiempo que incluso escribí un libro en el medio para tratar de explicarme Hooks a mí misma.

Así que vamos, ¿verdad? Ok, el título de mi charla es los efectos psicológicos de useEffect. Porque me di cuenta de que la mejor manera de hacer que la gente vea tu charla es darle un título divertido. Y probablemente eso es divertido. Y yo digo, sí, lo intento lo mejor que puedo.

Ok, mi nombre es Sarah. Mi apellido es Vieta. Pero no tienes que pronunciarlo. Sé que tiene dos i's. Y a menos que seas portugués, suena raro. Y soy desarrolladora en Consentbox. Como dije, soy de Portugal, también conocido como la pequeña España o el país de donde es Ronaldo. Y en Twitter soy NikitaFTW. Puedes hacerme dos preguntas, porque el primer nombre ya estaba ocupado por un programa de televisión.

Ok, vamos a hablar de React, ¿verdad? ¿Estamos emocionados? React? Sí. React es JavaScript. Y JS significa Seguridad Laboral. Compartiré esta broma en cada charla que haga, porque creo que es demasiado buena. Es tan buena. También es muy cierta. Ok. ¿Ya estás enganchado? Según este contador que está aquí sin ninguna razón aparente, no lo estás.

3. Comprendiendo los Ciclos de Vida de los Componentes

Short description:

Volviendo al tiempo en que teníamos ciclos de vida de los componentes. Teníamos muchos, como cantidad de componente, actualización de componente, componente se actualizó y componente se desmontará. ¿Puedes adivinar cuándo se ejecutaba componente se actualizó? Se ejecutaba cuando el componente se actualizaba. Los nombres eran bastante directos, como componente a cantidad se ejecutará cuando el componente se monte.

Pero sigamos adelante. Ok, volvamos al tiempo en que teníamos ciclos de vida de los componentes. Cuando éramos todos dulces niños de verano, teníamos ciclos de vida de los componentes. Y había muchos ciclos de vida de los componentes. Tenías como cantidad de componente... Ok, había muchos más, pero ahora todos son unsafe underscore, así que no los contaré. Tenías cantidad de componente, actualización de componente, componente se actualizó y componente se desmontará. ¿Cuándo es... Había muchos, pero... Y aquí está el truco. ¿Puedes adivinar cuándo se ejecutaba componente se actualizó? Esto no es como una charla real frente a una persona, así que no puedo esperar. Pero se ejecutaba cuando el componente se actualizaba. Porque los nombres eran bastante directos. Como componente a cantidad se ejecutará cuando el componente se monte. Tiene sentido, ¿verdad? Gracias, diapositivas.

4. Comprendiendo useEffect

Short description:

¿Puedes adivinar cuándo se ejecuta useEffect? Se ejecuta en todas partes. useEffect devuelve una función donde haces tu magia de código y limpias. El arreglo de dependencias es donde colocas tus dependencias. Tenemos tres cosas con las que jugar.

¿Puedes adivinar cuándo se ejecuta useEffect? Eso es. Se ejecuta en todas partes. Así que tienes esta pequeña función que se supone que debe ocupar el lugar de... o ciclos de vida de componentes. Matemáticas. Bien. Así es la base de useEffect. Entonces tienes useEffect y luego devuelve una función en la cual haces toda tu hermosa magia de código. Ninguno de nosotros realmente hace magia de código. Y luego regresas. Y luego también necesitas devolver una función, y aquí es donde haces todas tus limpiezas. Por ejemplo, si estás adjuntando escuchadores de eventos, aquí es donde los eliminas. Genial. Y esto aquí, este hermoso niño de verano, es el arreglo de dependencias, y aquí es donde colocas tus dependencias. Hablaremos más sobre el arreglo de dependencias más adelante porque creo que es la parte más complicada de entender. Entonces, para hacer todas esas cosas, tenemos tres cosas con las que jugar. Bien, genial.

5. Trabajando con el Sandbox

Short description:

Este es el sandbox con el que trabajaremos. Incluye React Spectrum, un botón para alternar el texto elegante, un botón para aumentar el contador y un div para mostrar el texto.

Entonces, este es el sandbox con el que trabajaremos. Porque si no uso Code Sandbox en una presentación, no sé qué será de mí. De acuerdo, allá vamos. Así que, todo bien. Entonces, primero repasemos el retorno y lo que tengo aquí para que todo tenga sentido para ti. Tengo algo llamado React Spectrum que simplemente hace esto, que es como una cerca. Simplemente no muestra texto lorem ipsum. Luego tengo un botón que alterna el texto elegante. Y tengo un botón que aumenta el contador, el número de años que está ahí. Y luego también tenemos este div que tiene el texto mostrado. Así que, no hay nada importante sucediendo aquí, ¿de acuerdo? Entonces, comencemos con nuestras travesuras de useEffect.

6. Understanding useEffect: Part 1

Short description:

Comencemos explorando el primer ejemplo. Definimos un gancho useEffect y ejecutamos nuestro código mágico dentro de él, que en este caso es un console.log. Este código se ejecuta cada vez que el componente se vuelve a representar. Discutiremos el concepto de volver a montar más adelante. El console.log dentro de useEffect se ejecuta nuevamente porque useEffect se ejecuta nuevamente. Ahora, limpiemos los console.logs y sigamos adelante.

De acuerdo, comencemos con el primero, que es lo primero que también te mostré. Entonces, ven aquí y digamos, const por alguna razón, useEffect, y sí. Entonces, ahora aquí, ejecutamos nuestra magia. Y en caso de que tuvieras alguna duda, mi magia son los console.logs. Así que, voy a hacer un console.log, lo sé, no es muy emocionante, pero. ¿Puedes oír mi teclado? Ahí vamos. Hey, okay. Entonces, si cambio el texto o hago algo, se actualiza. De acuerdo, se ejecuta. Lo siento. Entonces, ¿qué significa esto realmente? No tienes una matriz de dependencias, así que cada vez que useEffect, tu componente se vuelve a montar y, lo siento, se vuelve a representar, llegaremos a los montajes más adelante. Uh-huh. Estoy bromeando. No estoy bromeando. En realidad, llegaremos a eso más tarde. Entonces, el console.log se ejecuta nuevamente porque useEffect se ejecuta nuevamente y hay un console.log. Genial. Todo eso tiene sentido, ¿verdad? Reiniciemos esto, limpiemos todos esos console.logs.

7. Understanding useEffect: Part 2

Short description:

Todo eso tiene sentido, ¿verdad? Reiniciemos esto, limpiemos todos esos console.logs. Entonces, lo siguiente que teníamos era que podías ejecutarlo al inicio, ¿verdad? Ejecutémoslo al inicio. En este caso, generalmente eso es lo que quieres. Ahora se ejecuta al inicio y ahora cambiemos el texto elegante. Actualizamos el contador, hacemos todo lo necesario y no sucede nada. Si usas una matriz vacía, cualquier cosa en la matriz se activa. Entonces, si la matriz está vacía, nunca se ejecuta de nuevo. Eso es lo que debes tener en cuenta. No es que sea una matriz vacía. Es que lo que sea que esté en la matriz nunca cambia.

Todo eso tiene sentido, ¿verdad? Reiniciemos esto, limpiemos todos esos console.logs.

Entonces, lo siguiente que teníamos era que podías ejecutarlo al inicio, ¿verdad? Ejecutémoslo al inicio. No está aquí. Lo siento. No sé nada que tú no sepas. Solo me equivoqué al escribirlo.

De acuerdo, así que recarguemos esta página. Sí, ahí vamos. Voy a recargarla varias veces porque Code Sandbox intenta mantener el estado y no quiero eso. En este caso, generalmente eso es lo que quieres.

De acuerdo, genial. Ahora se ejecuta al inicio y ahora cambiemos el texto elegante. Actualizamos el contador, hacemos todo lo necesario y no sucede nada. De acuerdo. Cuando leí sobre useEffect, decía que si usas una matriz vacía, cualquier cosa en la matriz se activa. Entonces, cuando cambia lo que sea que esté en la matriz, useEffect se ejecuta de nuevo. Si la matriz está vacía, entonces nunca se ejecuta de nuevo. Y lo que debes tener en cuenta es que si lo dices así, suena como un truco. Como si dijeras, oh, es porque es una matriz vacía y técnicamente, si es una matriz vacía, nunca se ejecuta de nuevo. Parece un truco.

Entonces, déjame, en realidad, déjame crear una constante aquí. Y voy a crear una constante llamada Conferencia. Voy a llamarla React Summit. Y voy a poner la conferencia aquí. Y ahora la recargo de nuevo, aparentemente dos veces. Y si hago esto, no sucede nada. Eso es porque esto nunca cambia. Eso es lo que debes tener en cuenta. No es que sea una matriz vacía. Es que lo que sea que esté en la matriz nunca cambia.

8. Understanding useEffect: Part 3

Short description:

Entonces, eso es lo mágico de esto. El hecho de que sea una matriz vacía en su mayoría solo significa que nada va a cambiar en la matriz. Esto se debe al estado del que hablamos. Ahora hagamos algo solo cuando el contador cambie. Cuando aumento el contador, se ejecuta. Pero eso es un problema, porque dijimos que solo queríamos que se ejecutara cuando cambie years-past. Tengo un desmontaje para este componente aquí en el index.js, y podemos probar que se ejecuta de nuevo.

Entonces, eso es lo mágico de esto. El hecho de que sea una matriz vacía en su mayoría solo significa que nada va a cambiar en la matriz. Por ejemplo, puedo poner números aquí. Puedo poner texto. Puedo poner, no sé, sup. Sup nunca cambiará. Exactamente. No es una dependencia válida porque nunca cambia. Entonces, si nunca cambia, nunca se ejecuta de nuevo. Así es como debes pensar. De acuerdo.

Esto se debe al estado del que hablamos. Lo prometo. Exactamente. Eso es en lo que debes pensar. Supongo, espero que tenga sentido. De acuerdo.

Entonces, ahora hagamos algo solo cuando el contador cambie. Lo que quiero hacer es decir, bien, activa el texto elegante, aumenta el contador, pero no quiero que se ejecute cuando se cambie el texto elegante. Así que pongámoslo aquí. Aquí. Entonces, lo que necesitamos rastrear es years-past. Queremos mantener years-past y, de la misma manera, queremos decir qué, lo siento, olvidé las palabras en inglés, solo voy a seguir adelante, alrededor de la palabra en inglés. Entonces, queremos decir que cada vez que years-past cambie, queremos ejecutar esto de nuevo. De acuerdo, genial. Eso tiene mucho sentido. ¿Verdad? ¡Yay! De acuerdo, genial. Cuando aumento el contador, se ejecuta. Pero, pero, y eso va a, se ejecuta al inicio, ¿verdad? Eso es un problema, porque dijimos que solo queríamos que se ejecutara cuando years-past cambiara, pero ahí está el truco, ¿verdad? Cuando tu componente se monta, years-past cambia. Tengo un desmontaje para este componente aquí en el index.js, y podemos probar que se ejecuta de nuevo.

9. Understanding useEffect: Part 4

Short description:

Entonces, si descomento este botón aquí, mira este botón tan bonito, y cambio a inicio, y luego lo cambio de nuevo, puedes ver que se ejecuta de nuevo. Y esto se debe a que cuando se monta, técnicamente pasa de cero a establecer el estado.

Entonces, si descomento este botón aquí, mira este botón tan bonito, y cambio a inicio, y luego lo cambio de nuevo, puedes ver que se ejecuta de nuevo. Volvamos atrás. Nadie necesita ver este botón más. Puedes ver que se ejecuta de nuevo. Y esto se debe a que cuando se monta, técnicamente pasa de cero a establecer el estado. Como, es una fracción de milisegundo. No sé, creo que es un nanosegundo que está por debajo de un milisegundo o algo así, una cosa extraña como esa. No sé, fallé en matemáticas. Pero sí, se ejecuta de nuevo. Pero no queremos eso.

10. Understanding useEffect: Part 5

Short description:

Bien, hagamos la forma terrible de ver por qué no funciona. Si el valor es igual a cinco, ejecutamos el código. No funciona con booleanos. Creamos un nuevo estado, isMtnMobtinMob, establecemos isMounted en falso. Verificamos si está montado y establecemos isMtn en verdadero. Aún se ejecuta al iniciar. Recargamos la página, no cambia nada. Aumentamos el contador, no se ejecuta. Entendamos qué sucedió. isMtn realiza un seguimiento de si el valor cambió y vuelve a renderizar el componente. Todo en React es una propiedad.

De acuerdo, hagamos la forma realmente terrible. Y yo no hago esto, pero hagámoslo de la forma terrible para ver por qué no funciona. Si es igual a cinco, si es diferente a cinco, entonces queremos ejecutar esto porque comienza como cinco. Y si recargo, no obtengo nada. Y luego aumento el contador, y obtengo eso. Así que eso es genial. Pero no puedes hacer esto con algo que sea un booleano.

De acuerdo, intentémoslo de nuevo. De acuerdo, creemos un nuevo estado. Así que voy a decir const isMtnMobtinMob. Me equivoqué en dos letras, eso es increíble. Establezcamos isMounted. Y esto es igual a useStates. Y comenzará como falso. De acuerdo, lo que quiero verificar es si está montado, ¿verdad? Y necesito agregar isMtn aquí. Y quiero decir set isMtn igual a verdadero. Y quiero recargar esta página. Y aún se ejecuta. Y es posible que te preguntes por qué se ejecuta incluso al iniciar. Eso no tiene sentido. Si aumento el contador, aún se ejecuta, ¿todo bien? Permíteme mover esto hacia abajo. Y recarguemos la página. Y puedes ver que prácticamente no cambia nada. Y ahora hagamos esto y aumentemos el contador, y ahora no se ejecuta.

De acuerdo, repasemos qué demonios acaba de suceder, ¿de acuerdo? Si pongo isMtn aquí, ¿verdad? Esto significa que el valor realiza un seguimiento si el entero pasado cambió y si isMtn cambió. ¿Qué hace? Renderiza la primera cosa, y dice, de acuerdo, isMtn es falso, así que establezcamos isMtn en verdadero. Entonces vuelve a renderizar el componente nuevamente. Y lo que React significa, o lo que quiero decir cuando digo que se vuelve a renderizar, significa que literalmente ejecuta esta función nuevamente, pero dice, de acuerdo, ahora que hemos cambiado isMtn a verdadero, pasémoslo básicamente como un parámetro a esta función. Técnicamente, todo en React es una propiedad.

11. Understanding useEffect: Part 6

Short description:

No realmente. Básicamente, ejecuta la función nuevamente, y en este caso isMtn ya es verdadero. Entonces lo consoleamos. Eso no funciona. Quiero decir, hay formas de hacerlo funcionar obviamente, solo necesitas ponerlo de otra manera o eliminar isMtn. ¿Y por qué funciona cuando no hay isMtn?

No realmente. Básicamente, ejecuta la función nuevamente, y en este caso isMtn ya es verdadero. Entonces lo consoleamos. Eso no funciona. Quiero decir, hay formas de hacerlo funcionar obviamente, solo necesitas ponerlo de otra manera o eliminar isMtn. ¿Y por qué funciona cuando no hay isMtn? Entonces, si recargo esta página, ahora hace exactamente lo que queríamos. Eso se debe a que no realiza un seguimiento del valor de isMtn. Solo realiza un seguimiento de este valor. Entonces, este se construye la primera vez, y es como, está bien, esto ha cambiado, y va corriendo. No sé por qué React va corriendo. Y dice establece esto montado en verdadero. Pero luego, cuando se renderiza, cuando se establece montado en verdadero, en realidad no ejecuta esto porque no lo está rastreando. Así que muchas veces solo quiero decir que es posible que obtengas este error, que es una advertencia o un error, como quieras llamarlo, y dice que falta una dependencia, a veces eso es lo que quieres porque a veces no quieres realizar un seguimiento de algo que estás usando porque lo estás usando por una razón muy específica.

12. React: Refs and Mounting

Short description:

De acuerdo, pero eso es un poco chapucero, ¿verdad? React nos grita, y eso es lo último que queremos. Hablemos de refs. Normalmente usamos refs para hacer un montón de cosas con nuestro código. Establecemos una ref llamada isMounted, y cuando se monta realmente, consoleamos isMounted.current. Cambia el texto elegante.

De acuerdo, pero eso es un poco chapucero, ¿verdad? Porque literalmente React nos grita, y eso es lo último que queremos. Imagina que Dan te está gritando desde tu ventana. ¿Dónde está la dependencia? De acuerdo, sigamos adelante.

Entonces hablemos de refs, ¿de acuerdo? No sé por qué dije escribir, pero hablemos de refs. ¿Para qué usamos normalmente las refs? Normalmente usamos las refs para hacer un montón de cosas con nuestro código, así que si voy a crear una ref y voy a eliminar esto, y voy a decir const. Voy a llamarlo isMounted para no tener que cambiar el nombre más tarde porque de lo contrario lo olvidaré. Llama a useref. Y luego lo que normalmente hacemos es establecer una ref aquí, y decimos que la ref está montada, y luego podemos console.log. Entonces, si isMounted.current. Entonces, cuando esto se monta realmente, simplemente console.log isMounted.current. Y si recargo esto, puedes ver que obtenemos el botón, y puedo hacer cosas extrañas como hacer clic en el botón o algo así si quiero, y cambia el texto elegante. ¿No es hermoso? Aunque no es el punto principal.

13. Understanding useEffect: Part 7

Short description:

Pero vamos aquí, y copiemos esto aquí. Entonces, si recargo esta página ahora, obtienes hey, porque olvidé quitar el rojo de aquí. Han pasado cinco años, no hay console.log. Todo es perfecto. ¿Cómo hacemos que esto funcione? Así que digamos que isMounted.currents es igual a true. Y aún no funciona. Entonces, lo que está sucediendo aquí es que una ref realmente no vuelve a renderizar tu componente. Una ref es mutable y reactiva. Entonces, una forma realmente buena de engañar al sistema es ponerlo después.

Pero vamos aquí, y copiemos esto aquí. Espera, perdón. De acuerdo, ahí vamos. Y pongamos esto en falso. De acuerdo, genial. Entonces, si recargo esta página ahora, obtienes hey, porque olvidé quitar el rojo de aquí. Así que eso no estuvo tan mal. Me di cuenta a tiempo.

De acuerdo, han pasado cinco años, no hay console.log. Todo es perfecto. ¿Cómo hacemos que esto funcione? Entonces, vamos aquí, y digamos que isMounted.currents es igual a true. Y aún no funciona. De acuerdo. Y voy a hacer algo, y vas a decir qué demonios está haciendo. Entonces, si hago esto, ahora hace exactamente lo que queremos. Y esto puedo explicarlo muy bien.

Entonces, lo que está sucediendo aquí es que está montado, por lo que una ref realmente no vuelve a renderizar tu componente. Una ref es mutable. Una ref es reactiva. Así que eso es realmente bueno. Lo que significa que si lo pongo aquí, simplemente continúa. Es como si estuviera montado es verdadero. De acuerdo. Genial. No es verdadero. Y luego dice si está montado y está montado es verdadero. Entonces, una forma realmente buena de hacer esto y engañar al sistema es ponerlo después. Y luego, cuando realmente vuelve a renderizar el componente, cuando lo cambias, es cuando realmente se ejecuta porque es mutable. Entonces, eso es algo muy interesante sobre useRep, además de ser una forma elegante de hacer, ya sabes, cómo se llama, cosas elegantes de jQuery, también es un valor mutable que no requiere que tu componente vuelva a renderizarse. Genial.

14. Unmounting and Cleanup Effects

Short description:

Entonces, hablemos ahora sobre la desmontura. La función de retorno de un hook ejecuta la función de desmontura después de que el hook haya terminado de ejecutarse. Es un efecto de limpieza para tu propio hook. Cuando lo ejecutas en la desmontura, en realidad en la desmontura del componente, lo que debes hacer es ejecutarlo sin nada aquí.

De acuerdo. Entonces, hablemos ahora sobre la desmontura. Correcto. De acuerdo. Voy a eliminar todo esto. Y en realidad, no voy a eliminar esto. Así que si está montado en el actual, y lo que quiero hacer es eso, en realidad, voy a eliminar todo esto. Perdón. Solo tengo problemas para seguir un guion. Entonces, retorno. Y dije, de acuerdo, vamos a retornar algo. Y vamos a retornar un console log que diga desmontado. De acuerdo. Genial. Tenemos un hey. De acuerdo. Exactamente lo que esperábamos. Tenemos un hey. Y déjame recargar. Pero si aumento el contador, obtenemos desmontado. Porque la forma en que funciona la desmontura en los hooks no es exactamente la misma que en los antiguos ciclos de vida de los componentes. Porque resulta que un hook, la función de retorno de un hook ejecuta la función de desmontura después de que el hook haya terminado de ejecutarse. Así que en este caso, en realidad no se ejecuta cuando el componente se desmonta. Se ejecuta cuando el hook se desmonta. Así que es un efecto de limpieza para tu propio hook. No sé por qué hook está empezando a sonar extraño. Pero es un efecto de limpieza para este hook. Así que cuando lo ejecutas en la desmontura, en realidad en la desmontura del componente, lo que debes hacer es ejecutarlo sin nada aquí. Y luego, para eso estaba el botón aquí. Vamos a mostrar el botón.

15. Desmontura y Cosas Extrañas

Short description:

Una vez más, esto básicamente elimina la página de inicio y la alterna. Vamos a explorar algunas cosas extrañas. A menudo ejecuto funciones y retorno null si se cumplen ciertas condiciones. Pero a veces, no sucede nada. Oh, es porque olvidé rastrear los años pasados. Mi error.

Una vez más, esto básicamente elimina la página de inicio. Oh, en realidad eliminé el botón. Ahí vamos. Entonces, en realidad esto alterna la página de inicio. Entonces, si alterno la página de inicio aquí, puedes ver que se desmonta. Y esa es la forma en que puedes lograr que se desmonte así.

Ahora, veamos algunas cosas extrañas. Bien, una cosa que me sigue sucediendo, un problema que tengo es que estoy acostumbrado a ejecutar funciones. Entonces, ejecuto funciones, simplemente termino y blah, blah, blah. Función. Hermoso. Y luego pienso, si no es blah, simplemente retorno false o retorno null o algo así. Lo hago mucho. Y puede haber algo aquí que sea como, si los años pasados son diferentes a 5, retornar null. Suena bien, ¿verdad?

Entonces, incremento el contador. Y de lo contrario, console.log. Ahí vamos. Hermoso. Ahí vamos. Entonces, incremento el contador. Y en realidad, no sucede nada. Oh, lo siento, porque no estoy rastreando los años pasados. Es como, en realidad, no sucede nada. ¿No es eso extraño? Bien, entonces incremento el contador. Y esto no se ejecuta. Espera un segundo. Los años pasados son diferentes a 5. Retornar null. Oh, la arruiné. Lo siento.

16. Retornando Null desde useEffect

Short description:

Bien, simplemente retornemos null de esto. Y no sucedió nada. Eso es porque literalmente no estamos retornando nada. Así que intentemos hacer una cosa. Eso te va a dejar perplejo. Se supone que debes retornar una función, ¿verdad? Entonces hagamos algo como si usePassed es diferente de 5. Bueno, hagamos 6. Lo que sea. Simplemente retornemos null. Esto es algo así como shh, no mires el error. De alguna manera te dice lo que va a suceder. Entonces, si usePassed es diferente de 6, entonces retornamos null.

Bien, simplemente retornemos null de esto. Oh, permíteme recargar la página. ¿Por qué este sigue molestando? Cada vez que intento hacer esto. Retorno. Bien. Bien, sé exactamente qué sucedió. Y probablemente tendrás que cortar esto. Pero confío en ti, hombre, puedes hacerlo. Bien. Bien, y no sucedió nada. Eso es porque literalmente no estamos retornando nada. Así que intentemos hacer una cosa. Eso te va a dejar perplejo. Se supone que debes retornar una función, ¿verdad? Entonces hagamos algo como si usePassed es diferente de 5. Bueno, hagamos 6. Lo que sea. Simplemente retornemos null. Esto es algo así como shh, no mires el error. De alguna manera te dice lo que va a suceder. Entonces, si usePassed es diferente de 6, entonces retornamos null. ¿Te gusta eso? Entonces, bueno, solo te diré esto, no puedes retornar null desde un useEffect. Porque te dará el error de tipo DestroyIsNotAFunction. Lo cual es muy emo, me gusta, no me quejo. Pero es muy agresivo y, como DestroyIsNotAFunction no es solo... sí. Lo que sucede es que internamente React probablemente nombra la función que retornas, así que esto, como Destroy, y básicamente dice DestroyIsNotAFunction. Pero también quiero mostrarte algo gracioso, sé que hay una razón para esto, pero si lo pones en Define, está bien. De todos modos, está bien.

17. Tomando setShowText a un extremo

Short description:

Vamos a llevar esto a un extremo estúpido y agresivo. Podemos usar setShowText para alternar el valor y crear una función para obtener el valor anterior. Esto hará que el código se ejecute nuevamente al alternar. Agregar una ref y aumentar el contador no causará una ejecución continua. Retornar null detiene la ejecución del código.

Bien, hagamos una última cosa. Y solo porque quiero mostrarte cómo puedes llevar esto a un extremo estúpido y muy agresivo, así que digamos setShowText igual y obtengamos el valor anterior de setShowText, ahora puedes hacer eso diciendo, al hacer esto, también puedes llamar a setShowText y pasarle una función que obtenga el valor anterior. y igual a no mostrar. Bien, básicamente esto hace esto. Oh, lo siento, y necesitamos ejecutar esto en showTextChange. Y básicamente esto hace esto. ¿Y por qué es eso? Esto se debe a que creo que voy a romper el código sandbox, así que déjame darle un error. ¿Ya rompí el código sandbox? Creo que sí. Oh, no. Bien, todo bien. Esto se debe a que lo que estamos haciendo es establecer, bueno, setShowText en lo opuesto a lo que tiene, lo cual tiene sentido. Entonces básicamente lo alterna. Pero cuando lo alternas, esto se ejecuta nuevamente. Puedo mostrar esto con otra cosa. Así que volvamos a agregar la ref. Entonces ref igual a un botón, y déjame agregar una ref. Entonces console.button igual a useRef. Bien, ahora digamos setCounter igual a counter más uno. Y necesito obtener este valor. Counter más uno, todo bien. En realidad no todo bien. Hay un error aquí. SetCounter no está definido, porque lo llamé yearsPast. Obtiene el contador. Y ahora si... Y agrego showText aquí. Entonces, como, si aumento el contador, en realidad no sucede nada. Pero si hago esto, un valor aumenta. Pero no se sigue ejecutando. ¿Qué pasa si hacemos algo peor? Entonces digo return.

18. Retornando Valor desde useEffect

Short description:

Y para retornar, lo que voy a hacer es decir button.current.click. Button.current.click. Oh, okay. Perdón. No me grites. Y ahora hace esto. ¿No es genial? ¿No es simplemente un 10 de 10? Entonces, ¿qué está sucediendo aquí? Comienzas este efecto y dice establecer yearsPast a 1 año más. Pero cuando lo retornas, en realidad no realiza un seguimiento si cambias esto. Entonces, si aumento el contador, todo está bien porque se ejecuta cuando cambia el texto mostrado. Pero cuando este efecto termina de ejecutarse y hago clic en el botón de texto mostrado, todo se vuelve loco. Eso es useEffect, todos. Eso es todo lo que tengo por hoy. Muchas gracias por tenerme. Espero que esto te haya enseñado algo. Y espero que haya sido divertido. Que tengas un buen día. Adiós.

Y para retornar, lo que voy a hacer es decir button.current.click. Button.current.click. Oh, okay. Perdón. No me grites. Y ahora hace esto. ¿No es genial? ¿No es simplemente un 10 de 10? Okay. Entonces, ¿qué está sucediendo aquí? Comienzas este efecto, y dice establecer yearsPast a 1 año más. Todo tiene sentido, ¿verdad? Pero cuando lo retornas, en realidad no realiza un seguimiento si cambias esto, así que todo está bien. Perdón. Y comenta. Agrega un comentario de línea. Entonces, si hago esto y aumento el contador, todo está bien, porque se ejecuta cuando cambia el texto mostrado. Pero lo que sucede aquí es que, cuando este efecto termina de ejecutarse, luego hago clic en el botón de texto mostrado, y eso simplemente vuelve todo loco. Así que si hago clic en esto, todo se vuelve loco. Solo quería terminar con esto, porque creo que es importante. Y creo que se me acabó el tiempo. Solo míralo. Es hermoso. Y eso es useEffect, todos. Okay. Genial.

Okay. Eso es todo lo que tengo por hoy. Espero que te haya gustado. Si te gusta mi estilo de enseñanza, escribí un libro, como mencioné al principio, y puedes encontrarlo en la Guía Pina para React. Principalmente trata sobre el ecosistema de React y explica muchos de los hooks y qué son algunas cosas que uso que me ayudan a aprender React y a usarlo de manera más eficiente. Sí. Y eso es todo. Muchas gracias por tenerme. Espero que esto te haya enseñado algo. Y espero que haya sido divertido. Disfruta el resto del día. Que tengas un buen día. Adiós. ♪♪♪

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Next.js para Desarrolladores de React.js
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js para Desarrolladores de React.js
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
En esta avanzada masterclass de Next.js, profundizaremos en conceptos clave y técnicas que permiten a los desarrolladores de React.js aprovechar al máximo Next.js. Exploraremos temas avanzados y prácticas prácticas, equipándote con las habilidades necesarias para construir aplicaciones web de alto rendimiento y tomar decisiones arquitectónicas informadas.
Al final de esta masterclass, serás capaz de:1. Comprender los beneficios de los Componentes del Servidor React y su papel en la construcción de aplicaciones React interactivas, renderizadas por el servidor.2. Diferenciar entre el tiempo de ejecución de Edge y Node.js en Next.js y saber cuándo usar cada uno en función de los requisitos de tu proyecto.3. Explorar técnicas avanzadas de Renderizado del Lado del Servidor (SSR), incluyendo streaming, fetching paralelo vs. secuencial, y sincronización de datos.4. Implementar estrategias de caché para mejorar el rendimiento y reducir la carga del servidor en las aplicaciones Next.js.5. Utilizar Acciones React para manejar la mutación compleja del servidor.6. Optimizar tus aplicaciones Next.js para SEO, compartir en redes sociales, y rendimiento general para mejorar la descubrabilidad y la participación del usuario.
Aventuras de Renderizado Concurrente en React 18
React Advanced 2021React Advanced 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.