Los efectos psicológicos de useEffect

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.

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.

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.

¿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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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. ♪♪♪