Las Cosas Extrañas de React

Rate this content
Bookmark

Problemas de representación condicional en JSX, forwardRef, varias formas de crear referencias, render props (sí, todavía existen), componentes de orden superior (¿aún existen?), act, clases no extensibles, SuspenseList (bueno, tal vez en 10 años), React.FC y, por supuesto, nuestro buen amigo useEffect. Todas estas cosas extrañas son parte de nuestra biblioteca favorita (no un framework™) y aún así la usamos y amamos. ¿Por qué en realidad? Vamos a hablar de ello. Descargo de responsabilidad: Esta no es una charla muy seria, en su mayoría...

34 min
02 Dec, 2022

Video Summary and Transcription

React tiene algunas características extrañas y no documentadas, como usar el atributo key para volver a montar componentes. Los nuevos documentos beta y RFCs proporcionan información valiosa sobre el pensamiento de React y permiten proponer cambios. La historia de composición de React ha evolucionado desde mixins hasta componentes de orden superior y hooks. La actualización a React 18 solucionó los tipos de TypeScript pero introdujo problemas con los hijos opcionales. Las advertencias de React pueden ser útiles pero también molestas, y una biblioteca llamada React Reduce Stress puede suprimirlas. El modo estricto de React ayuda a identificar problemas y admite nuevas características, pero puede causar una doble representación en React 18. En general, React es un viaje interesante con sus defectos y oportunidades de aprendizaje.

Available in English

1. Introducción a React y el atributo key

Short description:

Hablemos de las cosas extrañas sobre React. Mi viaje con React comenzó con la versión 0.12 o 0.13. Y lo que realmente me gusta de React es que tienes React.js.org, la documentación, pero todos los detalles minuciosos, todo el pensamiento detrás de ello, lo puedes encontrar en la documentación no oficial, Twitter.com. Permíteme darte algunos ejemplos. ¿Sabías que puedes usar el atributo key para básicamente volver a montar componentes? Esto no está en la documentación oficial, pero una vez que descubrí esto, fue fantástico.

Vamos directo al grano. Hablemos de las cosas extrañas sobre React. Y gracias al comité roto por permitirme alienarlos justo por la mañana y arrepentirse de sus elecciones de vida.

Pero antes de hacer eso, permítanme hablar brevemente sobre mí. Soy Nick Graf. Trabajo en Serenity con un equipo de tres o cuatro personas. Está encriptado, también soy tutor y, dependiendo de quién pregunte, soy consultor o freelancer. Y continuemos conmigo.

Mi viaje con React comenzó en realidad con la versión 0.12 o 0.13, y en ese momento todo era realmente genial. JavaScript no tenía clases, así que solo teníamos funciones, crear clases en React, y eso era bastante bueno. Y luego llegó la versión 0.14, y luego sucedió lo primero, y yo pensé, eso es una señal de advertencia ¿Qué está pasando? ¿Qué, ahora 15? ¿Por qué no 1.0? Y sabían que habían hecho algo extraño aquí, porque publicaron esta publicación de blog muy larga sobre por qué están haciendo esto, cómo funciona Semware, pero lo están haciendo de manera un poco diferente y demás. Y así que esto es arrepentimiento, o dedicación, o compromiso. Y para mí, no me importaba. Sentí que, bueno, al menos lo saben, son conscientes, eso es suficiente para mí, y el mundo siguió adelante. Tuvimos las versiones 16, 17, 18, y las cosas estaban bien, de nuevo.

Y lo que realmente me gusta de React es que tienes React.js.org, la documentación, pero todos los detalles minuciosos, todo el pensamiento detrás de ello, lo puedes encontrar en la documentación no oficial en Twitter.com. Es realmente genial. Sigue estos tres perfiles y conocerás el pensamiento, el trasfondo, realmente quieres saber si estás usando React durante mucho tiempo. Permíteme darte algunos ejemplos. ¿Sabías que puedes usar el atributo key para básicamente volver a montar componentes? Así que si miras esto, es como una aplicación de componente muy simple. Pero lo que haces es, cuando haces clic en el botón, actualizas el ID. Por ejemplo, si esto pasa de ABC, una cadena, a GHI, lo que sucede es que estás volviendo a montar el componente. Y esto no está en la documentación oficial. Pero una vez que descubrí esto, fue fantástico porque sé que no deberías usar esto todo el tiempo, pero a veces es realmente útil. Si tienes a alguien que construyó un componente realmente malo que está usando useEffect de manera completamente incorrecta y no puedes arreglarlo. Simplemente puedes volver a montar el componente. Impresionante. Un truco muy bueno. Y no encontrarás esto en la documentación oficial. En absoluto.

2. Documentación faltante de React

Short description:

Escribí una publicación en el blog al respecto, diciéndole a la gente que no lo use. Pero es información interna que se puede aprovechar si lo conoces. Sebastian explica en Twitter que es un caso de uso válido. Me pareció extraño que no esté en la documentación oficial, pero Dan dijo que lo tendrá en cuenta para la reescritura.

Así que escribí una publicación en el blog al respecto y le dije a la gente: ey, no lo uses. Pero esto es como información interna que puedes aprovechar si realmente lo conoces. Pero luego vas a Twitter.com y en realidad, Sebastian explica que este es un caso de uso completamente válido. Y es como, ¿por qué esto no está en ninguna parte de la documentación oficial? Me pareció extraño. Así que propuse, ¿por qué no lo están agregando a la documentación? Pero gracias a Dan, él realmente dijo que lo tendrá en cuenta para la reescritura. Así que todavía no está en la documentación beta, pero lo estoy buscando, esperando que eventualmente llegue. Con suerte.

3. La importancia de leer la documentación beta

Short description:

La nueva documentación beta es excelente. Aún puedes aprender algo de ella, incluso si has estado usando React durante años. Recomiendo encarecidamente leer la documentación.

Y eso me lleva a otras cosas. ¿Quién de ustedes ha visto la nueva documentación beta? Excelente. ¿Quién de ustedes la ha leído de principio a fin? Bueno, realmente deberían hacerlo. Es realmente excelente. Todavía puedes aprender algo allí. Cada vez que hay una nueva sección, como que voy directamente a ella y la leo. Y realmente lo disfruto porque, aunque he estado usando React durante años y me siento como un consultor. He visto mucho, ya saben. Pero todavía aprendo algo allí. Y es genial. Así que si hay algo que deben recordar hoy, o al menos de esta charla, es leer la documentación. Es realmente muy buena.

4. React's Undefined Return and RFCs

Short description:

Desde 2018, puedes devolver un renderizado indefinido y devolver indefinido en los componentes de React. Este cambio se mencionó en una publicación oficial del blog, pero sin ninguna explicación. Tomó algo de tiempo, pero finalmente se publicó una explicación en los RFC. Los RFC son una nueva cosa de RFC de React que proporciona información sobre el pensamiento detrás de React y permite a los usuarios proponer cambios. Las charlas beta y los RFC ayudan a abordar el problema de las charlas no oficiales.

Les prometí más ejemplos. ¿Sabían que desde 2018 realmente pueden devolver un renderizado indefinido y devolver indefinido? Entonces, este es un componente válido. Y, bueno, eso fue en realidad una publicación oficial del blog, así que lo mencionaron, pero fue como cero menciones de por qué. Y yo pensaba que null era una gran decisión y realmente no quiero lidiar con personas que devuelven indefinido accidentalmente y luego tienes errores extraños. Y yo pensaba, vamos, ¿por qué está pasando esto? ¿Por qué este cambio ahora? ¿Por qué no hace un año? Y no tiene nada. Y aceptas en Twitter.com. Quiero decir, les llevó algo de tiempo. Creo que fueron 15 días o algo así. Pero luego realmente publicaron una explicación en sus RFC y esto es lo segundo. ¿Quién de ustedes conoce los RFC, esta nueva cosa de RFC de React? Levanten la mano. Wow, no muchos. Lean esto. Esto es excelente. A veces se retrasa, como lo de indefinido, les llevó un tiempo. Solo después de que la gente hiciera muchas preguntas. Pero realmente explican el pensamiento y realmente puedes proponer un RFC tú mismo. Como si quisieras ver algo cambiado en React. Entonces las charlas beta y los RFC resuelven este problema de Twitter.com. Y no el problema completo de Twitter.com, pero al menos el problema de React con las charlas no oficiales. De acuerdo.

5. Composición de React y Componentes de Orden Superior

Short description:

Otra cosa extraña acerca de React es la composición. Comenzó con mixins, que proporcionaban enlace de datos bidireccional. Sin embargo, una publicación de blog etiquetó a los mixins como perjudiciales, dejando a los desarrolladores con la opción de refactorizar o seguir adelante. La solución fueron los componentes de orden superior, que permitían la composición pero resultaron ser difíciles de mantener. Finalmente, Twitter se unió al equipo de React y anunció que los componentes de orden superior son una mala idea.

Sigamos adelante. Un tema completamente diferente. Otra cosa extraña acerca de React. Composición. La composición para mí comenzó, nuevamente mi historia. Mixins. Si alguno de ustedes ha visto alguna vez Mixins. Esto fue como en la versión 0.12 o 13. Fue maravilloso, ya saben. Tenías enlace de datos bidireccional, porque todos veníamos de Angular en ese entonces. Y así tenías que tener enlace de datos bidireccional. Teníamos memo mucho antes de que vieran memo. Y era genial. Estábamos construyendo muchas cosas y los mixins eran buenos y podíamos componer lógica.

Pero luego, ya saben. Otra publicación de blog salió. Así que, los mixins se consideraron perjudiciales. Así que tienes dos opciones, refactorizar tu código base o renunciar a tu trabajo y seguir adelante. Sí. La gente hizo diferentes cosas. Entonces, ¿cómo componemos ahora? ¿Cómo manejamos la composición? Bueno, pasamos a los componentes de orden superior. Y yo estaba totalmente a favor. Estaba como, de inmediato, en ese momento en este tren de moda con la programación funcional y los componentes de orden superior, era tan hermoso. Y podías componer todo y era completamente difícil de mantener. Era como, era terrible. Lo que pasa es que - quiero decir, era bueno para consultoría, ya saben, mucho ingreso, pero era como realmente enviar algo no era algo bueno. Así que nos dimos cuenta de que esto era una mala idea. Twitter se unió al equipo de React. Y luego hizo este anuncio. Los componentes de orden superior son una mala idea.

6. Composición de React y Hooks

Short description:

Así que nos deshicimos de ellos. Bueno, casi. Aún tenemos mem en forward ref. Desearía que forward ref no existiera, pero es otra historia. Luego tuvimos render props y realmente los odiaba. Entonces llegó nuestro salvador, los hooks. Los hooks son geniales porque son un concepto realmente extraño. Son funciones con estado para resolver nuestro problema con las clases no extensibles que teníamos antes. Pero los hooks, en realidad, están bien. Los hooks tienen un conjunto de reglas claras. Pero al final, creo que los hooks son algo con lo que al menos me siento cómodo, y espero que estemos casi al final de toda esta historia de composición, pero el tiempo lo dirá.

Así que nos deshicimos de ellos. Bueno, casi. Aún tenemos mem en forward ref. Desearía que forward ref no existiera, pero es otra historia. Y en este punto, pensé: soy parte de un experimento. Como, constantemente tengo que cambiar mi código base para lograr una composición correcta. Y sí, encontré esto extraño. Y no se detuvo ahí. Obviamente.

Luego tuvimos render props y realmente los odiaba. Es como, quiero decir, toda esta anidación sobre anidación sobre anidación, esto era horrible. Y nunca lo dije en voz alta. Bueno, tengo que decirlo. Pero, wow, los render props eran lo peor.

Entonces llegó nuestro salvador, los hooks. Y los hooks son geniales porque son un concepto realmente extraño. Son funciones con estado para resolver nuestro problema con las clases no extensibles que teníamos antes. Y todo lo que podemos hacer es lógica de plantillas en nuestro código de lógica empresarial. Es fantástico. Pero los hooks, en realidad, están bien. Los hooks son buenos. Tienen un conjunto de reglas claras, como que solo deben usarse en un componente React, no debe haber uso condicional. Pero al final, en realidad vuelves a Twitter. Y te das cuenta de que puedes usar el contexto condicionalmente. Simplemente no te permitía usarlo desde ESLint. Pero básicamente funciona y no causará problemas. Puedes hacerlo. Aún probablemente no sea la mejor idea. Pero todo es una mentira, ya sabes. Pero al final, creo que los hooks son algo con lo que al menos me siento cómodo, y espero que estemos casi al final de toda esta historia de composición, pero el tiempo lo dirá.

7. Named Exports and React Lazy

Short description:

Me encantan las exportaciones con nombre, pero React Lazy introdujo la necesidad de exportaciones por defecto. Probamos otros frameworks como Angular, pero volvimos a React. Las exportaciones por defecto pueden parecer extrañas, pero hay un truco que utiliza exportaciones con nombre para componentes de bibliotecas. Sin embargo, los frameworks prefieren las exportaciones con nombre. Ahora, hablemos de TypeScript. Me encanta TypeScript por su tipado y seguridad, pero los tipos de React pueden ser desafiantes en ocasiones.

Hablemos de algo completamente diferente de nuevo, otra cosa extraña, o llegamos a la cosa extraña. Me encantan las exportaciones con nombre. Son realmente geniales. Conoces la experiencia de autocompletado en el editor, es fantástica. Y en un momento, hace un par de años, pude estar de acuerdo con todos los equipos con los que estaba trabajando, solo usábamos exportaciones con nombre. Todos estaban de acuerdo, era fantástico. Pero luego llegó esto, React Lazy, porque React Lazy requiere que tengas una exportación por defecto para tu componente. Yo pensé, no. Todas nuestras decisiones se fueron por el desagüe y tenemos que volver a pensar. Creo que con todos los equipos que volvieron a tener exportaciones por defecto para los componentes, no estábamos contentos, pero está bien, lo aceptamos. Quiero decir, bueno, lo aceptamos. En este punto, también sientes que tal vez el césped debe ser más verde al otro lado. Por ejemplo, investigamos Angular, y descubrimos que la versión actual de Angular es 3.1.2. Y pensamos, olvídalo. De vuelta a React, veamos cómo va esto. Y sí, todavía hacemos exportaciones por defecto ahora. Me parece extraño, pero está bien. Y sí, incluso hace un par de días, hubo una serie de tweets donde la gente estaba copiando y pegando el mismo tweet y tuiteando que las exportaciones por defecto fueron un error en JavaScript, y estoy de acuerdo. Pero hay una pista, un truco que quiero mostrarte. Si tienes alguien, si tienes un componente que es una exportación con nombre y no puedes controlarlo porque proviene de una biblioteca, puedes usar exportaciones con nombre. Se ve feo, probablemente confunde a los juniors en tu equipo, los confunde mucho, pero aún así, hay una forma de hacerlo. Sí. Por qué probablemente aún quieras, por qué nos quedamos con las exportaciones por defecto, porque todos los frameworks de todos modos prefieren las exportaciones con nombre. Sí, es un poco extraño, pero podemos vivir con eso.

Pasemos al siguiente tema, TypeScript. Me encanta TypeScript. Es increíble. Me encanta el tipado. La seguridad que ofrece es genial. Lo único que no siempre me gusta son los tipos de React.

8. React.fc y Children Implícitos

Short description:

Cuando comienzas a escribir tu primer componente de React, es posible que te encuentres con React.fc y te preguntes por qué no hay una forma consistente de hacer las cosas. Los expertos en TypeScript desaconsejan el uso de React.fc debido a un problema con los children implícitos. Sin embargo, los tipos de React se actualizaron en 2018 para eliminar los children implícitos, permitiendo la tipificación explícita. Este cambio asegura que los componentes que utilizan children estén correctamente tipados, mientras que los componentes que no aceptan children generan advertencias. El objetivo es evitar que se utilicen operaciones que esperan un tipo de valor específico con valores que no tienen sentido en esa operación.

Déjame darte un ejemplo. Cuando comienzas a escribir tu primer componente de React, aprendes, vale, aquí está la función de componente de React, y lo haces así, y luego te das cuenta, vale, pero la gente no usa esto. La gente usa React.fc. Y yo pensé, no tenemos diversión, extravagante y gracioso para la palabra función en JavaScript. ¿Por qué hacer esto? ¿Por qué no podemos tener una forma de hacer las cosas para que puedas enseñar una forma y puedas aprender una forma y te sientas bien con ella? Pero esto no es el final de la historia porque luego, cuando realmente comienzas a leer sobre cómo tipar componentes, y así sucesivamente, te das cuenta de que muchos expertos, expertos en TypeScript, te dicen que no uses React.fc.

Básicamente, todo se reduce a que la mayoría de ellos se quejaban de un problema que existía, sí, spoiler alert, ahora está resuelto. Básicamente, los tipos siempre eran implícitos, esto es lo que sucedió, las implicaciones de React.fc agregaron los children implícitos. Entonces, si tenías un componente, como un modelo, que realmente necesitaba tener children, podías pasarlos o dejarlos fuera. Pero si tienes otros componentes donde ni siquiera usas los children en absoluto, no puedes declararlo de ninguna manera porque siempre estará opcionalmente presente con React.fc. Entonces, básicamente, lo que propusieron es usar esto en su lugar. Y haces esto y migras todo tu código con tu equipo, y luego incorporas a nuevos juniors y están realmente emocionados porque sienten que tienen una mejora de la que pueden hablarte. ¿Sabías que hay un React.fc y podríamos migrar a esto? Y la única reacción es como, hablemos de otra cosa. Y te sientes realmente mal por ellos. Pero todo cambió. Por cierto, los tipos de React no son mantenidos por el equipo central de React. Pero quien los mantenga, tomó una decisión realmente genial porque con React 2018 y el cambio rompedor, introdujeron un cambio en sus tipos, eliminando los children implícitos. Ta-da. Y yo pensé, aleluya, se solucionaron todos mis problemas, puedo volver a React.fc. ¿Por qué? Porque si tengo esto aquí, si tengo children, ahora tengo que tiparlos explícitamente, o puedo tiparlos explícitamente y básicamente decir, okay, childrens React.node. Y lo que está sucediendo aquí es que si miras este componente, el componente utiliza children, y se espera que pongas los children. Si haces esto, todo estará bien. Pero si haces esto aquí, obtendrás un error de typescript. Te dirá, hey, este componente solo funciona bien si pasas los children. Así que por favor, pasa tus children. Y también puedes hacerlo al revés. Si dejas los children fuera por completo, lo bueno es que si haces esto, estará bien. Pero si haces esto aquí, te dará una advertencia, hey, deberías proporcionar los children. No deberías proporcionar los children porque este componente no acepta ningún children. Así que este es un truco muy útil. Realmente arreglaron los tipos y encaja muy bien con mi modelo mental, básicamente, quiero decir, esto es Wikipedia, pero el objetivo es evitar que se utilicen operaciones que esperan un tipo de valor específico con valores que no tienen sentido en esa operación.

9. Tipos de TypeScript y Actualización a React 18

Short description:

Los tipos de TypeScript en React se solucionaron con la actualización a React 18. Cambiar todos los componentes se puede hacer con modificaciones de código, como JS Codeshift. Sin embargo, el problema con el tipo 'props con children' persiste, con los children opcionales causando confusión.

Siempre quieres tener como TypeScript es una herramienta que te ayuda a entender las cosas y no como refrescar y luego darte cuenta, oh, en realidad no usa children en absoluto. Así que eso fue realmente, realmente genial. La cosa extraña o la cosa más extraña acerca de los tipos de TypeScript en React se solucionó realmente. La cosa es que ahora, cuando actualizas a React 18, en realidad tienes que cambiar todos tus componentes, y esto es una pena de nuevo. Como, oh, Dios, ahora tengo que ir a través de cientos de miles de componentes y arreglarlos, pero hay una cosa llamada code mod. ¿Quién de ustedes ha oído hablar de code mods, JS Codeshift? Ok, varios de ustedes. Básicamente, son scripts que te permiten ejecutar en todo tu código y lo genial es que arreglarán tu código. Así que si estás actualizando a React 18 y actualizas los tipos, puedes simplemente ejecutar este script en tu carpeta de origen y estará hecho y actualizará todo. ¿Qué hace? Toma este componente, por ejemplo, y lo actualiza a este, y yo pensé, sí, resolvió todos mis problemas, y luego pensé, al mirar de nuevo, espera un momento. Este componente en realidad no usa children. ¿Qué estás viendo aquí? Props con children, y pensé, tal vez usé mal el script o hice algo mal, pero quiero decir, comienzas a investigar. Así que miras este tipo, como qué es props con children, y luego ves los children opcionales de nuevo, y sentí como, ¿por qué? Vamos. ¿De verdad me estás haciendo esto? ¿Por qué me haces esto? Al menos, cuando haces esto, ten la dignidad de llamarlo props con children opcionales para que sepa qué está pasando. Ok, no es perfecto, pero mejor, digamos.

10. Fixing React Types for Use Effect

Short description:

Hablemos de useEffect. Muchos problemas surgen porque las personas no usan la función de limpieza. Decidimos solucionar los tipos de React para useEffect, obligando a devolver una función de limpieza. Esto proporciona una advertencia útil si falta, haciéndolo más visible en las revisiones de código. No hace que React sea menos extraño, pero hace que nuestras vidas con efectos sean más razonables.

Siguiente tema, hablemos de useEffect. Oh, dios. Todos amamos useEffect. No puedo arreglar useEffect por ti. Lo único que puedo decirte es que muchos problemas surgen porque las personas no usan la función de limpieza. Al menos, eso es lo que he visto. Una cosa que encuentro muy molesta es que la gente a menudo no sabe que debería hacer una función de limpieza y luego se olvidan y es muy fácil pasarlo por alto en una revisión de código. Así que después de mucha frustración, finalmente decidimos hacer algo al respecto. Podríamos usar ESLint y demás, pero la forma más fácil fue, arreglemos los tipos reales de React porque podemos anularlos. Así es como se ven básicamente los tipos de React para useEffect, y lo que puedes ver aquí en la parte superior derecha en la segunda línea es destruct.avoid. Básicamente, las personas pueden omitir la función de limpieza y no tienen que devolverla. No te preocupes demasiado por los tipos. Lo que podríamos hacer es simplemente arreglarlos. Lo sobrescribimos y decimos, no, void no está permitido. Y también podemos arreglar el nombre, porque, vamos, en toda la documentación dice no destructor, dice función de limpieza. Entonces llamémoslo función de limpieza. Y luego no lo llamemos callback de efecto porque esto es muy poco específico. Llamémoslo use effect callback. Realmente me gusta, cuando ya estoy aquí, arreglar las cosas de todos modos. ¿Y qué te da esto? Básicamente, ahora estás obligado a devolver una función de limpieza. Y si no lo haces, te dará una advertencia, oye, te falta una función de limpieza, básicamente. Y básicamente, las personas tienen que hacer esto. Y sí, las personas aún podrían hacer esto. Pero si ves esto en una revisión de código, al menos es muy visible que esto está sucediendo. Así que este es un pequeño truco agradable que quería compartir. No hace que React sea menos extraño, pero al menos hace que nuestras vidas con efectos sean más razonables. Lo que me lleva al siguiente tema.

11. Advertencias de React y Componentes Desmontados

Short description:

Tengo una relación de amor y odio con las advertencias. No se puede realizar una actualización de estado de React en un componente desmontado. Esto es realmente bueno porque te indica que has cometido un error y puedes solucionarlo. No estamos lanzando un error, pero al menos te estamos dando una advertencia.

Advertencias. Tengo una relación de amor y odio con las advertencias. Probablemente todos ustedes conozcan esta. No se puede realizar una actualización de estado de React en un componente desmontado. Tienes docenas de ellas. Esto es realmente bueno. Me gusta. Porque te indica que has cometido un error. Puedes solucionarlo. No estamos lanzando un error, pero al menos te estamos dando una advertencia. Estoy bien con eso. Esto es más parte del amor. Sé que todavía las odio cuando las veo, porque sé que hice algo mal. Y sí, no me culpes, React. Pero al menos estoy tratando de solucionarlo.

12. Solucionando Advertencias Molestas y Bromas en la Consola

Short description:

Descubrí una forma de solucionar las advertencias molestas que provienen de un paquete. Al parchear el registro de la consola, pude limpiar la consola casi al instante. Esto me permitió hacer bromas a mis colegas, pero también resaltó la necesidad de abordar el problema. Incluso creé una versión que ayuda a identificar el código relacionado con la consola en la base de código.

De acuerdo. Pero el problema es que no puedo soportarlo cuando proviene de un paquete. Esto es muy molesto. Y te lo mostraré. Esta es una situación del mundo real. Estas fueron dos advertencias por las que tuvimos que pasar cada vez que solo queríamos ver nuestra consola registros. Esta es la segunda advertencia. Es como, es una aplicación web de React Native. ¿Por qué tengo que pasar por esto cada vez? Viene de un paquete. Sí, ya he informado el problema. Y sí, alguien tiene que hacerlo. Pero a veces incluso es muy difícil de reproducir. Es como, oh, dios. Y nosotros—o al menos yo estuve—estuve bien con ellos durante un tiempo. Y luego pensé, en algún momento, tengo que hacer algo al respecto. No puedo soportar esto más.

Entonces intenté buscar cómo puedo solucionar esto? ¿Cómo podemos hacer algo al respecto? Y luego descubrí algo muy, muy interesante, que cambió mi vida al menos. ¿Sabías que puedes parchear el registro de la consola? Es fantástico, me encanta. Y sí, en este punto, cuando descubrí esto, debería haber hecho la otra cosa y hablar con mi equipo y solucionarlo. Pero lo primero que hicimos—o hice—fue encontrar una forma de hacer bromas a otras personas. Básicamente, sobrescribiendo el registro de la consola al limpiar la consola en casi menos de un segundo. Entonces básicamente, podemos pegar esto aquí. Y luego, cada vez que intentes registrar algo, lo registras y quieres inspeccionar la salida. Y se borra de inmediato. Genial.

Y sabes, la parte importante de una buena broma es que debe ser lo suficientemente molesta como para que se molesten, pero no deben hacer algo al respecto. Deben sentir como, está bien, eché un vistazo a la salida, tal vez esto sea suficiente. Es una línea muy delgada para hacer una buena broma. Y luego, por supuesto, no quería que fuera demasiado fácil para todos los que se encuentren con ella. Así que creé otra versión donde puedes buscar en tu base de código y encontrar cualquier cosa que esté relacionada con la consola, el registro o la limpieza.

13. Biblioteca React Reduce Stress

Short description:

Así que, finalmente, después de haberme divertido lo suficiente, volví a lo serio. Y lo solucionamos. Creamos un pequeño script que básicamente soluciona estas advertencias para componentes específicos y demás. Y luego pensé, bien, tengo que dar charlas en conferencias este año. ¿Qué hago? Así que creemos una biblioteca a partir de esto, para poder anunciar algo en las conferencias. Esto es, React Reduce Stress. Realmente existe en NPM. Puedes encontrarlo. Puedes usarlo. Simplemente obtén React Reduce Stress y suprime las advertencias.

Así que realmente lo dificultas. Si logras incorporarlo en la base de código, les costará mucho encontrar esto. Por favor, úsalo. Esto está completamente bien. Creo que sí. No lo sé. No me demandes. Y sí.

Así que, finalmente, después de haberme divertido lo suficiente, volví a lo serio. Y sentí que, bueno, hagamos algo al respecto con nuestras advertencias molestas. Y lo solucionamos. Creamos un pequeño script que básicamente soluciona estas advertencias para componentes específicos y demás. Básicamente puedes hacer un poco de coincidencia de patrones con RegEx.

Y luego pensé, bien, tengo que dar charlas en conferencias este año. ¿Qué hago? Esto es algo nuevo. Así que creemos la biblioteca a partir de esto, para poder anunciar algo en las conferencias. Y esto es, React Reduce Stress. Realmente existe en NPM. También hay un repositorio en GitHub. Puedes encontrarlo. Puedes usarlo. Y sí. Simplemente obtén React Reduce Stress y suprime las advertencias. Y puedes ver, por ejemplo, para el orden de los hooks puedes pasar el componente. Y para la clave única en la lista, sí, estamos usando una biblioteca llamada Avatar Group. Estaban haciendo algo y arruinando los hijos. Fue como, oh, dios, lo informé, pero ya no estoy esperando nuevas versiones. Y luego algunas cosas de React Native que también suprimimos. Así que sí. Puedes usar esto.

14. React Strict Mode and Use Effect

Short description:

Esto realmente funciona. Y si tienes preocupaciones, repórtalo. Y le puse mucho amor. Como una noche, ya sabes. Pero funciona. ¿Y qué te da? Tranquilidad en tu consola. ¡Ta-dah! Hay otro que quiero mencionar. ¿Quién de ustedes usa el modo estricto de React? No muchos. ¿Por qué? Es broma. Porque sí, por razones. Si tienes un código antiguo, el modo estricto es bueno porque te ayuda a identificar qué está saliendo mal, y así sucesivamente. Pero hay dos cosas que son completamente nuevas desde React 18. Básicamente, detectar efectos secundarios inesperados y asegurar un estado reutilizable. Si estás usando el modo estricto en el desarrollo de React 18, renderizará tu componente dos veces, y también ejecutará el useEffect y el useLayoutEffect dos veces. Si habilitas el modo estricto, básicamente verás muchas situaciones de useEffect rompiéndose. Esto es realmente molesto, pero tiene un propósito. Muchas de las nuevas características que vendrán con React, como el componente fuera de pantalla, esperan que useEffect no tenga efectos secundarios extraños y haga las cosas mal. Pero el problema es que básicamente necesitamos limpiar nuestro código.

Esto realmente funciona. Y si tienes preocupaciones, repórtalo. Y le puse mucho amor. Como una noche, ya sabes. Pero funciona. ¿Y qué te da? Tranquilidad en tu consola. ¡Ta-dah! Lo cual me lleva a un tema relacionado.

Y creo que sí, este es el último. Así que, basta con los registros, suprimiendo los registros. Pero hay otro que quiero mencionar. ¿Quién de ustedes, la última cosa extraña, quién de ustedes usa el modo estricto de React? No muchos. ¿Por qué? Es broma. Porque sí, por razones. Y esto es copiado de la documentación oficial. Quiero decir, la mayoría de esto es básicamente, como, razones legítimas. Si tienes un código antiguo, el modo estricto es bueno porque te ayuda a identificar qué está saliendo mal y así sucesivamente. Pero la cosa es que hay dos cosas que son completamente nuevas desde React 18. Básicamente, detectar efectos secundarios inesperados y asegurar un estado reutilizable. Y lo que hace es que si estás usando el modo estricto en el desarrollo de React 18, renderizará tu componente dos veces, y también ejecutará el useEffect y el useLayoutEffect dos veces. Quiero decir, el useLayoutEffect generalmente se ejecuta solo si estás comprometido con el DOM, pero aparentemente luego se renderiza dos veces. No creo que realmente se comprometa dos veces con el DOM, pero es como ejecutar el useLayoutEffect y el useEffect dos veces. Esto tiene un buen propósito porque muchos de nosotros estamos abusando de useEffect y luego haciendo cosas que no deberían ejecutarse dos veces. Si habilitas el modo estricto, básicamente verás muchas situaciones de useEffect rompiéndose. Esto es realmente molesto, pero tiene un propósito. Muchas de las nuevas características que vendrán con React, como el componente fuera de pantalla y demás, esperan que useEffect no tenga efectos secundarios extraños y haga las cosas mal. Pero el problema es que entiendo esto, y bueno, básicamente necesitamos limpiar nuestro código.

15. React Double Rendering and Strict Mode

Short description:

A menudo las personas tienen dificultades para entender por qué ocurre el doble renderizado en React 18. La falta de información y registros en la consola dificulta el diagnóstico del problema, especialmente en el modo de desarrollo. Para abordar esto, propuse agregar un registro en la consola al repositorio de React, pero recibí comentarios limitados. Como solución, amplié React Reduce Stress con el componente Reduce Stress, que proporciona una pista al usar el modo estricto en desarrollo. Este componente ayuda a los desarrolladores a comprender que React desmontará y volverá a montar cada componente al montarlo. El Sistema de Detección del Modo Estricto en el núcleo de React detecta el bloqueo del modo estricto e incluso admite el modo oscuro en la consola.

Y entiendo esto. Pero el problema es que las personas no lo entienden. No hay ninguna pista de que esto esté sucediendo. Si actualizas a React 18 o si simplemente lo instalas en una nueva versión, en un proyecto completamente nuevo no tienes información sobre por qué está sucediendo esto. Y las personas no lo entienden. Y esto es una conversación real con un amigo que básicamente perdió el día porque estaba construyendo un reproductor de video en su aplicación. Y no sé qué hizo, pero el efecto de montaje, el useEffect de montaje, básicamente montaba el reproductor de video dos veces, y el reproductor de video no podía manejarlo, y bla, bla, bla, y un par de palabras malsonantes que tuve que censurar. Y pensé, ¿por qué no hay un registro en la consola para esto? ¿Sabes? Mostramos a las personas si no tienen las DevTools y están ejecutando en DevMode, les mostramos que instalen las DevTools, pero no les estamos dando ninguna información sobre por qué está ocurriendo este doble renderizado y ¿sabes por qué? Solo ocurre en DevMode, no ocurre en producción. Así que en realidad tienes un comportamiento diferente si estás ejecutando en producción o no. Esta vez hice lo otro, ¿sabes? Fui al repositorio de REG.js, abrí un problema, propuse si podemos tener un registro en la consola para esto, y así sucesivamente. No hubo muchos comentarios, tiene un par de semanas. Nadie del equipo de React lo ha visto. Pero ya tengo React Reduce Stress, así que pensé que puedo solucionarlo yo mismo. Porque lo que puedes hacer es, podemos ampliar React Reduce Stress con el componente Reduce Stress que puedes poner en tu código. Así que todos los nuevos juniors que vengan, si estás usando el modo estricto, puedes importar Reduce Stress, solo tienes que agregar un componente allí. Y lo que hará es, si estás en modo estricto en el modo de desarrollo, esto no hace absolutamente nada, te dará esta pista. Porque estás usando el modo estricto en desarrollo, React desmontará y volverá a montar cada componente cada vez que el componente se monte. Da-da-da. Básicamente ayuda a tus desarrolladores a entender qué está pasando. Y sabes, de nuevo, le puse mucho amor. Uh, dos tardes o algo así. Y tiene algunas características. ¿SMDS, quién ha oído hablar de eso? Ok. Sistema de Detección del Modo Estricto. ¿Dónde encontré esto? En realidad está en el núcleo de React. ¿Y sabes qué hacen? Sobrescriben el registro en la consola para detectar si está ocurriendo el bloqueo del modo estricto. Es genial. Tiene soporte para modo oscuro. De verdad. Así que el color rojo en la consola cambia ligeramente.

QnA

Conclusion and Q&A

Short description:

Y solo admite navegadores modernos. ¿Cuál es la conclusión para ti? Lee la documentación de React. Echa un vistazo a los RFC. Lee el grupo de trabajo. Diviértete gastando una broma a alguien con el bloqueo de la consola. E instala React Reduce Stress. Ha sido un viaje bastante interesante. React es increíble. Tiene sus defectos. Pero es un viaje súper interesante. Y he aprendido mucho. Muchas gracias.

Y solo admite navegadores modernos. Así que Firefox, Chrome, Brave y Edge. Y no admitimos Safari ni Internet Explorer. Sí. Y eso es básicamente todo.

¿Cuál es la conclusión para ti? Hubo mucho murmullo. Lee la documentación de React. Echa un vistazo a los RFC. Lee el grupo de trabajo. Diviértete gastando una broma a alguien con el bloqueo de la consola. E instala React Reduce Stress.

Y a pesar de que esto fue un desahogo de 30 minutos. Quiero decir que ha sido un viaje bastante interesante. He aprendido mucho. Ha sido muy divertido. Y en realidad me quedaré un rato más. React es increíble. Tiene sus defectos. Pero es un viaje súper interesante. Y he aprendido mucho. Soy Nick Graf. Espero que hayas disfrutado hoy. Muchas gracias. Increíble. Muchas gracias, Nick. ¿Está funcionando esto? Por favor, pasa a mi oficina. Solo tenemos un par de minutos. Pero hay un par de preguntas en Slido del público. Recuerda que es slide.do y el código es 0212 si quieres hacer una pregunta. Nick, cuando enseñamos a nuevos desarrolladores de React, ¿deberían aprender sobre estas peculiaridades o deberíamos ocultarlo hasta que estén en el punto de no retorno? Definitivamente, cuando estén en el punto de no retorno.

Subtle Introduction and Strict Mode Detection

Short description:

Quieres tener una introducción sutil y enfocarte en las cosas fáciles para mantener a las personas interesadas. Detectar el modo estricto implica verificar una advertencia de un componente heredado obsoleto. No hay una variable oculta interna para esto. En cuanto a re-script, aunque tiene un gran sistema de tipos, consideraciones prácticas llevaron a no utilizarlo. A veces, ser práctico es más fácil y mejor.

No vas a una cita y le cuentas la cosa más extraña sobre ti. Sí, creo que sí. Quieres tener una introducción sutil. Y luego puedes contarles más a tiempo. UseEffect es algo que debes contarles de inmediato. Y tal vez si alguien es nuevo en React, no les introduzcas UseEffect de inmediato. Pero mantén eso en segundo plano y enfócate en las cosas que son fáciles y mantienen a las personas interesadas. Quieres mantener la felicidad porque creo que así es como las personas aprenden mejor. Creo que es un buen consejo.

La otra pregunta que tenemos es ¿cómo detectas si la aplicación se está ejecutando actualmente en modo estricto? Es realmente esto, hay un registro en la consola. Quiero decir, solo revisa el código. Pero básicamente, hay un registro en la consola que está sucediendo, creo, y luego lo haces así. Oh sí, oh, no. Es una advertencia de un componente heredado que básicamente está obsoleto. Entonces estamos detectando si el componente heredado está, por lo que React Reduce Stress utiliza el componente heredado que debería estar obsoleto, y luego lanza una advertencia y estamos detectando si se lanza la advertencia, y así es como detectamos que se está ejecutando el modo estricto. Es una locura. Pero esto está en una prueba central de React, así que pensé, OK, parece ser la mejor manera. Copiemos y peguemos. No hay una variable oculta interna que puedas usar para descubrirlo. Sí, justo.

Hay un par de preguntas interesantes. ¿Cuál es tu opinión sobre re-script en esta etapa? Entonces, para contexto, fui parte de la comunidad temprana de Reason.ml, y re-script es básicamente un sucesor de eso, y sí, me encanta re-script. Me encantan los buenos sistemas de tipos, y es realmente genial, pero ahora mismo no lo estoy usando. Solo porque, como tengo un producto y tengo desarrolladores que estaban familiarizados con TypeScript, pero no con re-script, y luego, como integrarlos a re-script habría llevado mucho tiempo, y al final fue una decisión muy práctica no ir con eso. Quiero decir, me encantan los sistemas de tipos, me encanta escribir código limpio, pero sí, a veces lo práctico es simplemente más fácil y mejor. Tenía más sentido.

Tiene sentido, a veces tienes que ser práctico. Eso es todo el tiempo que tenemos para preguntas, pero Nick estará en la sala de oradores junto a la recepción para preguntas individuales en persona. Gracias, Nick. Muchas gracias.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn