CSS Es Más Poderoso De Lo Que Piensas! Construyendo Búsqueda en React con CSS

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

CSS es más poderoso de lo que usualmente le damos crédito. Veamos juntos cómo podemos hacer uso de CSS para construir juntos capacidades de filtrado completamente funcionales en un componente de emoji-picker, mejorando el rendimiento al mismo tiempo.


Usaremos algunas técnicas antiguas y nuevas, y las combinaremos de maneras creativas para convertir una experiencia lenta y con retraso en una capacidad de búsqueda moderna y receptiva.


Aprenderemos sobre los avances en CSS y descubriremos el potencial no explotado de CSS para construir interfaces de usuario dinámicas.

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

Evyatar Alush
Evyatar Alush
23 min
28 Oct, 2024

Comments

Sign in or register to post your comment.
  • Victor Homyakov
    Victor Homyakov
    -
    One of the few people who cares about performance
  • Va Da
    Va Da
    P4
    Emojis for the win!
Video Summary and Transcription
Hola a todos. Hoy voy a hablar sobre cómo resolví desafíos reales en React usando solo CSS. Uno de los principales paquetes que mantengo es EmojiPicker React, con cientos de miles de descargas semanales. Tiene todas las características que esperarías de un EmojiPicker, pero la capacidad de búsqueda era lenta. Logré solucionarlo usando CSS. Déjame mostrarte cómo. La funcionalidad de búsqueda depende del estado global y requiere actualizar cada emoji individualmente, lo que resulta en un trabajo excesivo del DOM. La virtualización o el desplazamiento virtual no son una solución viable debido a la lista de emojis no uniforme. Al examinar el DOM, descubrí que cada emoji tenía una etiqueta de área con información relacionada con la búsqueda. Esto me llevó a investigar más a fondo e implementar una solución desde cero. Creamos un nuevo componente llamado CSS search, que toma un valor como cadena. Si el valor está vacío, devolvemos null. Eliminamos todos los emojis de la lista de emojis si hay resultados de búsqueda. Se muestran los emojis que coinciden con el término de búsqueda. El rendimiento es instantáneo. Las categorías vacías se eliminan usando el atributo has de CSS. Los selectores not y has de CSS se utilizan para eliminar categorías vacías. Se utiliza un contador para mostrar el conteo de emojis encontrados. Usando flexbox y order, podemos posicionar el elemento after al principio de la lista. La anidación de CSS nos permite anidar todo bajo la lista de emojis, simplificando la estructura. El rendimiento de la búsqueda sigue siendo muy rápido. Creé el paquete flareup, una biblioteca de CSS en JS específicamente para paquetes NPM. Flareup resuelve problemas de compatibilidad y funciona en SSR y CSR. Emoji-picker-react usa flareup para renderizar emojis sin JavaScript. Flareup coloca un elemento de estilo en el DOM, haciéndolo fácil de usar.

1. Introduction to CSS in React

Short description:

Hola a todos. Hoy voy a hablar sobre cómo resolví desafíos reales en React usando solo CSS. Uno de los principales paquetes que mantengo es EmojiPicker React, con cientos de miles de descargas semanales. Tiene todas las características que esperarías de un EmojiPicker, pero la capacidad de búsqueda era lenta. Logré solucionarlo usando CSS. Déjame mostrarte cómo.

Hola a todos. Mi nombre es Evatar Alush. Soy ingeniero de software en Meta. Soy el autor de varios paquetes de código abierto. Muy apasionado por el código abierto, el diseño de API y la construcción de herramientas para otros desarrolladores. Vivo en Tel Aviv con mi hermosa esposa. Y también soy el humilde servidor de esta poderosa criatura.

Hoy, voy a salir un poco de mi zona de confort porque aunque usualmente hablo sobre JavaScript, TypeScript, Node, construcción de paquetes, React, hoy voy a hablar sobre algo diferente. Voy a hablar sobre CSS. Y más específicamente sobre cómo resolví desafíos reales en React usando solo CSS.

Verás, uno de los principales paquetes que mantengo es EmojiPicker React, que es uno de los componentes de EmojiPicker más populares en React o en general, de hecho, con cientos de miles de descargas semanales. Y tiene la mayoría de las características que esperarías de un EmojiPicker estándar. Así que tiene todo el conjunto de emojis. Tiene diferentes tonos de piel que puedes elegir. Tiene diferentes estilos de emojis. Así que tienes Apple, Twitter, Google y Facebook. Y también tiene capacidad de búsqueda. Y escribiré algo y puedes ver bastante fácilmente que la búsqueda es bastante rápida. Aparece inmediatamente. Los resultados de búsqueda aparecen inmediatamente. Y, bueno, eso es lo que esperarías de un componente de búsqueda en un EmojiPicker.

Pero no siempre fue así. Verás, cuando creé el EmojiPicker allá por 2017, la capacidad de búsqueda era bastante lenta. Y el principal problema que siempre recibía en la página de GitHub del proyecto era, la búsqueda es lenta. No podemos usar la búsqueda. Toma hasta dos segundos buscar cualquier cosa. Y eso no es aceptable. Y logré solucionarlo, principalmente usando CSS. Y antes de mostrarte cómo lo hice, quiero mostrarte cómo se sentía antes de implementar la solución. Así que volveré al componente de demostración que creé.

2. Challenges with EmojiPicker Search

Short description:

Y este es el EmojiPicker sin esa corrección. La capacidad de búsqueda es lenta y causa un retraso al escribir. Toma varios segundos para que los resultados de búsqueda se actualicen, lo que lo hace inaceptable. La funcionalidad de búsqueda depende del estado global y requiere actualizar cada emoji individualmente, lo que resulta en un trabajo excesivo en el DOM. La virtualización o el desplazamiento virtual no son una solución viable debido a la lista de emojis no uniforme.

Y este es el EmojiPicker sin esa corrección. Así que tal como era antes. Y escribiré algo y notarás un ligero retraso. Así que estoy escribiendo la letra K ahora. Y tomó, no sé, como medio segundo para volver a renderizar. Y, bueno, no está tan mal, dirías. Pero si sucede con cada pulsación de tecla, eso no es cómodo.

Y estoy usando en realidad un MacBook Pro de gama alta, pero ¿qué pasa con los usuarios reales en el mundo que no tienen máquinas de gama alta? Veamos cómo se siente para ellos. Así que vamos a la pestaña de Rendimiento en Chrome DevTools y tratemos de ralentizarlo, digamos a tiempo seis. Y veamos cómo se siente esto para los usuarios en el mundo. Así que te haré saber cuando realmente escriba algo para que puedas cronometrarlo tú mismo. Así que estoy escribiendo la letra K ahora. Y eso tomó casi, no sé, dos segundos para realmente ver algo actualizándose. Y obviamente, si escribo más caracteres, verás que se hace más corto y más corto porque tiene menos emojis de los que filtrar. Pero aún así, eso es inaceptable.

¿Y por qué es eso? Bueno, como puedes ver aquí, la búsqueda está aquí arriba en el encabezado. Está completamente distante del componente de la lista de emojis. Así que todo lo que queremos actualizar aquí tiene que pasar por algún estado global en el selector y luego volver a bajar a la lista de emojis antes de que pase algo. Y luego tiene que actualizar cada emoji que necesita ser eliminado o re-agregado. Así que eso es mucho trabajo para hacer en el DOM. Y ese es el trabajo más intensivo, en realidad. Así que tenemos actualización de estado global. Tenemos diferenciación de estado para cada uno de los componentes. Tenemos diferenciación de DOM para cada uno de los componentes. Y luego tenemos que realmente volver a renderizar todo. Y si te muestro lo que pasa es, bueno, cuando voy a la pestaña de componentes en React DevTools, puedo realmente resaltar los cambios de estado y las re-renderizaciones. Y verás aquí que volvemos a renderizar todo. Y, bueno, podrías decir que podría usar alguna virtualización o desplazamiento virtual. Pero, bueno, primero que nada, la lista de emojis no es uniforme. Así que tenemos los títulos que ocupan todo el ancho.

3. Exploring a Different Approach

Short description:

Nos encontramos con desafíos con listas no completas y la complejidad de la cuadrícula. Usar una biblioteca de terceros no era una opción, así que exploré un enfoque diferente. Al examinar el DOM, descubrí que cada emoji tenía una etiqueta de área con información relacionada con la búsqueda. Esto me llevó a investigar más a fondo e implementar una solución desde cero. Reemplacé el useFilterHook global con un estado local en el componente, lo que permitió un mayor control y reactividad.

Nos encontramos con listas no completas. Es una cuadrícula muy compleja. Y además, esto podría requerir una biblioteca de terceros. Y, bueno, no quiero usar una biblioteca de terceros. No quiero obligarte a instalar ninguna biblioteca de terceros solo porque instalaste mi paquete. Así que decidí no hacer eso y en su lugar resolverlo de una manera diferente.

Y la forma en que lo encontré, bueno, intenté mirar el DOM del emoji picker y ver qué tenía allí. Y lo primero que noté es que, bueno, hace un tiempo añadí una etiqueta de área para cada uno de los emojis. Y una etiqueta de área es una propiedad HTML que añadimos alguna descripción para el elemento que estamos mirando para que las personas con discapacidad visual, usuarios de nuestro sitio web o personas que usan un lector de pantalla, puedan saber realmente qué hay allí. Así que para cada uno de los emojis, usamos el nombre completo del emoji o el término de búsqueda del emoji como la etiqueta de área. Así que ya tenemos alguna información relacionada con la búsqueda en el DOM. Y pensé, bueno, tal vez pueda hacer uso de eso de alguna manera. Así que eso me llevó a investigar. Y ahora vamos al código e intentemos implementarlo desde cero.

Ahora tenemos el componente como estaba antes. Así que tenemos el componente de entrada dentro del... El elemento de entrada dentro del componente de búsqueda y usa un useFilterHook global. Y este useFilterHook actualiza un estado global y luego cuando cambiamos aquí, y luego se vuelve a renderizar en un lugar diferente. Así que eliminemos todo eso porque realmente no queremos usarlo más. Intentemos hacer algo diferente. Y bueno, la primera ley de React, en realidad tienes que tener estado para volver a renderizar. Así que añadamos un estado local solo para este componente. Así que hagamos esto const value setValue y establezcámoslo con una cadena vacía. Genial. Ahora, oh, importemos un nuevo estado. Genial.

4. Implementing CSS Search

Short description:

Creamos un nuevo componente llamado CSS search, que toma un valor como una cadena. Si el valor está vacío, devolvemos null. Añadimos un elemento de estilo para aplicar CSS en el DOM como una cadena.

Bien. Así que si intento hacer algo aquí ahora, verás que no estamos viendo ninguna respuesta a eso. Entonces, ¿por qué no podemos hacer con esta información? Bueno, creemos un nuevo componente justo al lado de este. Y llamémoslo CSS search dot TSX. E importemos. Siempre React desde React. Genial. Ahora hagamos export default function CSS search. Y tomemos value y value va a ser una cadena. Value es una cadena.

Genial. Ahora, si value está vacío. Oh. Devolvamos null. Y de lo contrario, también devolvamos null porque no sé qué hacer con él todavía. Así que usemos CSS search solo para ver que está ahí. Así que CSS search. Y pasémosle el value. Genial. Así que no hay errores. Pero de nuevo, no pasa nada. Realmente no estamos renderizando nada nuevo. Pero lo genial aparece ahora. Así que vuelvo a CSS search. Y lo que quiero hacer es añadir un nuevo elemento de estilo. Y todos te dirán que no hagas esto y probablemente no deberías. Pero funciona, supongo. Así que, ¿por qué no? Y lo que hace la etiqueta de estilo es aplicar algo de CSS en el DOM como una cadena. Y de nuevo, la gente te advertirá sobre eso. Pero en este caso, funciona bastante bien.

5. Implementing Emoji Search

Short description:

Eliminamos todos los emojis de la lista de emojis si hay resultados de búsqueda. Encontramos todos los emojis que tienen el valor correcto en su etiqueta de área y los mostramos.

Así que hagamos esto. Y lo que quiero hacer, antes que nada, es tomar la lista de emojis y decir que, bueno, simplemente eliminar todo. Eliminar todos los emojis en caso de que tengamos algunos resultados de búsqueda. Así que primero que nada, tenemos la lista de emojis. Entonces, ¿cómo se llama el elemento de la lista de emojis? EPR emoji list. Tomemos ese. Oh. Oh, tiene que ser una cadena. Correcto. Así de simple. Y luego digamos que button EPR emoji. Ese es el elemento para cada uno de los emojis. Y hagamos display none. Entonces, lo que está pasando aquí es que si tenemos un valor, si no tenemos un valor, no estamos haciendo nada. Pero si tenemos un valor, simplemente estamos eliminando todos los emojis. Y bueno, escribamos algo. Oh, no tenemos ningún emoji. Eso es la mitad del trabajo. Ahora tenemos que hacer que los otros que necesitan aparecer, aparezcan. Así que hagamos esto. Primero que nada, intentemos encontrar todos los emojis que realmente tienen el valor correcto en ellos. Así que lo que queremos hacer es nuevamente ir a este y luego buscar todos los emojis que tienen la etiqueta de área con nuestro valor. Así que hagamos algo como esto. Podemos tener un selector de propiedad para la etiqueta de área. Y luego la parte genial es que podemos hacer una coincidencia parcial. Así que puede estar al principio, al final o en el medio. Y lo que queremos hacer aquí es cuando sea igual a nuestro valor. Y esta es la parte genial. Si es igual a nuestro valor, hagamos display flex. Ahora todos los emojis, si no cometo ningún error allí, todos los emojis que tienen nuestro valor en algún lugar de su etiqueta de área.

6. Improving Emoji Search

Short description:

Los emojis que coinciden con el término de búsqueda se muestran. El rendimiento es instantáneo. Las categorías vacías se eliminan usando el atributo has de CSS.

Podría estar de nuevo al principio, al final o en el medio. Se mostrarán como flex. Así que empecemos a escribir. K, I, N, G. Ahora estamos viendo algunos resultados y solo los emojis que realmente tienen esto. Así que tenemos guiñando, y tenemos caminando, y en bicicleta. Y tenemos bebiendo, y cocinando, y chocando copas. Tenemos todos los emojis que realmente tienen este término. Así que esto es bastante genial.

Y esto fue con dos líneas de CSS. Y veamos el rendimiento aquí antes de continuar con el resto. Así que intentemos. Bueno, esto es instantáneo. Y tratemos de ver con la limitación del rendimiento. Y de nuevo, bastante instantáneo. Así que ya me gusta. Pero mejoremos eso.

Así que veamos qué más podemos hacer. Así que además de eso, bueno, viste aquí que también tenemos estas categorías vacías. Ahora, en la versión basada en estado, bueno, podríamos filtrar todas las categorías que estaban vacías porque ya lo sabíamos. Pero en CSS, bueno, eliminamos todo. Pero la categoría no tiene el título en sí. No tiene el nombre del emoji. Por eso no está desapareciendo. Entonces, ¿qué hacemos aquí? Bueno, esto es bastante genial porque en CSS recientemente, y por recientemente, me refiero a hace dos años, creo, añadieron el atributo has, o el has al selector, perdón, que nos permite seleccionar basándonos en los hijos de un selector dado. Y esto nos permite realmente verificar si nuestro título o si nuestro grupo de emojis tiene los emojis que estamos buscando o no. Y si no existen allí, simplemente haremos que se eliminen a sí mismos. Así que hagamos esto. Así que quitemos esta lista de emojis y hagamos EPR emoji category.

7. Enhancing Emoji Search

Short description:

Los selectores CSS not y has se utilizan para eliminar categorías vacías. Se utiliza un contador para mostrar el número de emojis encontrados.

Y luego decimos not. Not es el pseudo-selector que niega todo lo que viene dentro de él. {{^}}Y luego decimos has. Así que donde no tiene nuestra etiqueta de área o el elemento específico con la etiqueta de área. Y ahora lo que vamos a hacer es nuevamente display none.

Ahora, si empiezo a buscar aquí, veamos qué pasa. Espera. Estamos viendo que no tenemos categorías vacías. Y eso es nuevamente solo agregando esta pequeña parte. Ahora, te dirán, y esto probablemente sea cierto, que la combinación de not y has no es muy eficiente. Pero nuevamente, no se puede comparar con lo que había en la versión solo de JavaScript. Así que me parece un compromiso bastante razonable.

Ahora, tampoco tenemos una buena búsqueda sin el conteo de resultados de búsqueda. Entonces, ¿qué podemos hacer aquí? Bueno, CSS no puede contar, ¿verdad? ¿Puede? Bueno, veamos. Así que lo que podemos hacer aquí es algo bastante genial. Y este es uno de los trucos más antiguos y geniales de CSS que tenemos y no muchos lo usan. Por cierto, por una buena razón. Pero solo por el gusto de hacerlo, hagámoslo. Se llama un contador. Y podemos hacer counter reset. Y decir que lo llamaremos emojis y lo pondremos en cero. Y luego para cada uno de los elementos que estamos mostrando, podemos realmente incrementar el contador en uno. Así que hagamos counter increment en uno. Y lo siguiente que queremos hacer es realmente mostrarlo. Así que hagamos before. Así que hagamos EPR emoji list. Y lo que queremos hacer es antes, queremos mostrar en el contenido de ese elemento el contador real. Así que contenido, contenido, counter, emojis. Y lo que queremos hacer aquí es decir emojis encontrados. Y esto mostrará el conteo de emojis.

8. Optimizing Emoji Search

Short description:

El contador funciona yendo elemento por elemento e incrementando, pero no funciona en el elemento before. Para resolver esto, podemos usar el elemento after. Usando flexbox y order, podemos posicionar el elemento after al principio de la lista. La anidación de CSS nos permite anidar todo bajo la lista de emojis, simplificando la estructura. El rendimiento de la búsqueda sigue siendo muy rápido.

Pero si empiezo a escribir, veamos, veremos cero emojis encontrados. Espera, pero te prometí un contador aquí. Bueno, aparentemente la forma en que funciona el contador es que va elemento por elemento por elemento, incremento por incremento por incremento, y luego suma todo. Pero en nuestro elemento before, bueno, mucho antes de que se encontraran los elementos, así que no tenemos coincidencias. Entonces, ¿qué podríamos hacer?

Podríamos hacerlo después, ¿verdad? Pero si lo hago con el after, bueno, está aquí abajo. Esto no es bueno porque no queremos desplazarnos hasta el final solo para mostrar eso. Entonces, ¿qué podemos hacer? Bueno, este es otro truco genial. Lo que queremos hacer aquí es decir que la lista de emojis debe mostrarse como flex. Y, bueno, lo siguiente que queremos hacer es poner order menos uno para el after. Y esto llevará el elemento after hasta el principio de la lista de emojis.

Así que lo que pasa ahora es que escribo, y, bueno, verás que porque lo convertimos en flex, entonces obviamente todo está desordenado. Así que también hagamos flex direction column, y actualicemos. Bien, ahora estamos viendo que tenemos 353 emojis encontrados. Tenemos toda la lista ordenada correctamente. Y, bueno, veamos qué está pasando. Sí, tenemos un conteo funcionando. Agreguemos algo de espacio aquí. Genial.

Ahora, otra cosa genial que podemos hacer solo con CSS, bueno, o otra mejora genial sobre CSS que agregaron recientemente es la anidación de CSS. Así que esto es bastante complicado, diría yo, y esto es bastante complejo. Pero, ¿y si pudiéramos simplemente anidar todo bajo la lista de emojis? Así que voy a arreglarlo rápidamente y mover todo para que esté bajo la lista de emojis. Eso es bastante genial. E incluso el elemento after, o el pseudo elemento after, debería funcionar también, así como está. Y ahora si actualizo y empiezo a escribir, veremos que todo funciona como funcionaba antes. Así que creo que esto es bastante genial. Y nuevamente, intentemos compararlo con lo que era antes en términos de rendimiento. Vamos a ralentizarlo, y tratemos de ver cuánto tiempo toma. Oh Dios mío, lo actualicé mientras estaba ralentizando. Bien, intentemos de nuevo. E incluso mientras se ralentiza, esto es bastante instantáneo.

9. Expanding Usage with flareup

Short description:

Podemos observar las actualizaciones de estado en la pestaña de componentes, y la barra de búsqueda se actualiza. La anidación de CSS puede no ser compatible con todos los navegadores. Creé el paquete flareup, una biblioteca de CSS en JS específicamente para paquetes NPM. Flareup resuelve problemas de compatibilidad y funciona en SSR y CSR. Emoji-picker-react utiliza flareup para renderizar emojis sin JavaScript. Flareup coloca un elemento de estilo en el DOM, lo que facilita su uso.

Y veamos de nuevo la pestaña de componentes y veamos las actualizaciones de estado, y veamos qué está pasando aquí. Y mientras escribo, vemos que solo se actualiza la barra de búsqueda. Ahora veamos nuestro DOM de resultado. Así que tenemos este estilo aquí, oh, no ese estilo, veamos aquí. Sí, tenemos ese elemento de estilo con todos nuestros cambios aquí. Así que esto es bastante genial. Por cierto, la anidación de CSS aún no es compatible con todos los navegadores, creo, o al menos no con navegadores heredados, así que verifica tu compatibilidad también.

Y esto es bastante, bastante impresionante, creo. Y bueno, esto funcionó bastante bien. Y me llevó a intentar pensar si esto funciona bastante bien, para qué más podría usarse. Y luego creé otro paquete, se llama flareup, que es una biblioteca de CSS en JS que lleva este concepto al siguiente nivel. Está basada en la sintaxis de stylex, la biblioteca de CSS en JS de Facebook meta, pero esta está hecha específicamente para paquetes NPM.

Lo que noté es que al construir un paquete NPM como emoji-picker-react, siempre hay un problema. No funciona en SSR para algunos de los usuarios, no funciona con este empaquetador o aquel empaquetador, o necesitan importar de manera diferente, o tengo que asumir que usan algún preprocesador de CSS. Y pensé, bueno, quiero que esto simplemente funcione para todos. Así que creé flareup, que es una biblioteca de CSS en JS destinada solo para paquetes NPM y solo para bibliotecas de código abierto que no están basadas en aplicaciones y no son aplicaciones. Y bueno, hace prácticamente lo mismo. Toma el CSS, lo coloca en un DOM, y simplemente funciona. Funciona en SSR, funciona en CSR. De hecho, puedo mostrarte que emoji-picker-react usa solo esto, solo flareup. Y si intento renderizar el emoji-picker sin ningún JavaScript, aún vendrá del servidor sin ningún problema. Obviamente, no pasará nada aquí porque es estático sin ningún JavaScript y sin React. Pero de nuevo, flareup hace el resto. Y la forma en que funciona, de nuevo, es colocando este, diría, masivo, pero aún así elemento de estilo justo en el DOM del selector. Así que esto es bastante genial también.

Muchas gracias. Fue un placer. Y disfruta el resto de la conferencia. 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

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.
No resuelvas problemas, elimínalos
React Advanced 2021React Advanced 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
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.
Los Átomos de Jotai Son Simplemente Funciones
React Day Berlin 2022React Day Berlin 2022
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
How React Compiler Performs on Real Code
React Advanced 2024React Advanced 2024
31 min
How React Compiler Performs on Real Code
Top Content
I'm Nadia, a developer experienced in performance, re-renders, and React. The React team released the React compiler, which eliminates the need for memoization. The compiler optimizes code by automatically memoizing components, props, and hook dependencies. It shows promise in managing changing references and improving performance. Real app testing and synthetic examples have been used to evaluate its effectiveness. The impact on initial load performance is minimal, but further investigation is needed for interactions performance. The React query library simplifies data fetching and caching. The compiler has limitations and may not catch every re-render, especially with external libraries. Enabling the compiler can improve performance but manual memorization is still necessary for optimal results. There are risks of overreliance and messy code, but the compiler can be used file by file or folder by folder with thorough testing. Practice makes incredible cats. Thank you, Nadia!

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 🤐)
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.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced 2021React Advanced 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured Workshop
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
Workshop
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Fundamentos de Remix
React Summit 2022React Summit 2022
136 min
Fundamentos de Remix
Top Content
Workshop
Kent C. Dodds
Kent C. Dodds
Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas
¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™?
Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida?
Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM