Búsqueda solo con CSS*: ¡Mejora el rendimiento de filtrado en React con CSS!

Hola a todos. ¿Cómo están? Mi nombre es Evitar Alus. Soy un ingeniero frontend en Meda en Tel Aviv y soy el autor de varios paquetes de código abierto, uno de los cuales es este pequeño paquete genial llamado emoji-pkreact que te permite poner un emoji-pkreact directamente en tu aplicación React en la web con facilidad.

Y hoy quiero compartir con ustedes un pequeño truco que se me ocurrió para mejorar la búsqueda y el performance en las aplicaciones React y los paquetes React. Y cuando comencé a construir emoji-pkreact allá por 2017, pensé que sería bastante sencillo construir un componente emoji-pkreact con todas las características de un emoji-pkreact esperado que también fuera eficiente y fácil de usar. Y casi inmediatamente comencé a recibir problemas sobre el performance, por ejemplo, que la búsqueda es extremadamente lenta y, obviamente, mi respuesta fue que no se reproduce. Obviamente, eso estaba mal.

La búsqueda era realmente lenta. Y la razón es bastante comprensible. Verás, tenemos aproximadamente 1800 emojis diferentes que se muestran en el Emoji Picker. Y cuando interactúas con cada uno de ellos, tienes algunas actualizaciones de estado. Entonces, por ejemplo, cuando pasas el cursor o cuando escribes algo en la búsqueda, haces cambios en el DOM y en los elementos. Y cuando tratas con tantos elementos, y cuando tienen tantos estados diferentes en los que pueden estar, puede ser bastante intenso trabajar con ellos. Y especialmente aquí, vemos que la barra de búsqueda está aquí arriba y los emojis están allí. Lo que significa que están muy distantes en el árbol React. Lo que significa que tenemos que tener un estado de Emoji Picker React casi global para gestionar las capacidades de filtrado. Y luego, cuando escribimos algún carácter dentro del Emoji Picker, actualizamos el estado, ejecutamos algún algoritmo de búsqueda que intento hacer eficiente, y luego React va y hace la diferenciación del DOM y luego solo aplica los cambios al DOM, y cada uno de estos pasos lleva tiempo. Y cuando tratamos con 1800 emojis, eso lleva mucho tiempo.

Ahora, si miras ahora, parece bastante inmediato. Funciona bastante rápido, pero quiero mostrarte solo por un segundo cómo se sentía antes de que Emoji Picker React tuviera estas capacidades y la búsqueda mejorada. Así que escribiré algo y notarás un ligero retraso, incluso en mi MacBook Pro. ¿Lo sentiste? Hubo algún retraso entre mi carácter siendo escrito y los cambios apareciendo en la pantalla, y eso es un MacBook Pro de alta gama. Intentemos hacer algunas desaceleraciones, así que 6x de desaceleración para simular una máquina más antigua, o más lenta, y veamos cómo se siente realmente para un usuario en la naturaleza. ¿Y viste eso, verdad? Eso no es ideal. Tenemos que arreglar esto. Solo para mostrarte lo que realmente está pasando cuando escribimos cada carácter, cuando escribimos cada carácter, realmente salimos y volvemos a renderizar todo. Y la razón es, nuevamente, que tenemos ese estado de árbol de nivel superior y que realmente tenemos que modificar todos los elementos en el DOM. ¿Pero realmente tenemos que hacerlo? Y esto es lo que quería averiguar. ¿Realmente tengo que manipular el DOM y cambiar todos los emojis solo para hacerlos desaparecer? ¿O tal vez puedo de alguna manera saltármelo? Así que fui a mirar los elementos emoji reales que creé y lo que tengo aquí, cada emoji es un componente de botón o un elemento de botón y tienen una imagen dentro de ellos. A veces tienen un span con un carácter emoji.

Depende de la configuración del usuario. Pero cada uno de ellos tiene una etiqueta de área para accessibility, y también el nombre completo del emoji, porque un emoji puede tener varios nombres para la búsqueda. Y dado el hecho de que ya tengo toda esta información en el DOM, ¿quizás puedo hacer uso de ella para el filtrado también? Aparentemente puedo y aparentemente es bastante fácil.

En CSS tenemos algo que se llama un selector de atributos que nos permite seleccionar un atributo arbitrario y basado en su valor aplicar estilos a los elementos. Así que esto significa que puedo establecer un selector basado en el nombre completo, la propiedad data o basado en la etiqueta de área. Y solo quiero mostrarles cómo se hace y lo fácil que es implementarlo.

Así que aquí está nuestro componente de búsqueda. Actualmente funciona actualizando el estado global pero en lugar de hacer eso, no lo hagamos más. Y en su lugar, tengamos algunos estados locales. Así que importemos useState. Así que import useState de React y luego establezcamos este estado. Así que const value setValue equals useState. Debería ser indefinido y también inicialicémoslo a indefinido o string. Sí, genial. Y ahora todo lo que tenemos que hacer aquí es establecer un valor y si volvemos a mirar el selector de emojis veremos que escribir no hace nada más que ocultar las categorías. Y la razón es porque aún no aplicamos nada de él.

Y lo que quiero hacer ahora es algo que todos te dirán que no hagas pero que en realidad funciona bastante bien. Es crear otro componente que devuelve una etiqueta de estilo. Sí, una etiqueta de estilo, un estilo CSS. Así que hagamos una función y llamémosla Búsqueda CSS. Y tomará el valor que es string o indefinido, ¿verdad? Sí, seguro.

Vale. Si no tenemos un valor, devolvamos null y de lo contrario devolvamos un elemento de estilo. Así que devolvamos el estilo y toma una cadena como su cadena de concha y tenemos que poner algo de estilo dentro y solo para hacer todo más limitado, primero tomemos el selector CSS o los nombres de clase para el selector de emojis solo para que apliquemos todo dentro del selector en sí y no fuera. Así que selector de emojis React y lista de selector de emojis. Así que ese es nuestro selector y también recortemos y pongamos en minúsculas esto y el valor de la búsqueda valor para que no tratemos con problemas de sensibilidad a mayúsculas y minúsculas.

Ahora necesitamos escribir una consulta de búsqueda y va a ser súper simple considerando el hecho de que ya conocemos el selector de atributos. Así que lo que podemos hacer es escribir una consulta de búsqueda. Um, que toma un botón y luego el nombre completo de data. De nuevo, ese es el que contiene o, uh, todos nuestros nombres de emojis y luego podemos hacer una coincidencia parcial significa que si tenemos como una parte del nombre o nuestra consulta de búsqueda está en la parte del nombre del emoji, como al principio en el medio o al final, todavía será coincidido, lo que sea que esté dentro. Así que por ejemplo, si hago sonrisa, si busco el emoji sonrisa, pero solo escribo el carácter I será coincidido. Así que esta es la consulta de búsqueda y lo que queremos hacer ahora es simplemente decirle a los emojis que se oculten si no coinciden con esto porque de lo contrario todos los demás emojis deberían mostrarse. Así que lo que podemos hacer es usar la consulta de búsqueda y decir que cada botón que no coincida la consulta de búsqueda debe establecerse en display none, lo que significa que cada emoji que no se ajuste a esto, nuestra consulta de búsqueda desaparecerá inmediatamente. Simplemente pongamos esto dentro de nuestro componente de búsqueda y veamos si funciona. Así que hagamos un valor, pásale el valor y vuelve al selector de emojis y escribiré K y empezamos a ver algo desapareciendo, un ING y están desapareciendo como búsqueda está funcionando. Probemos bicicleta y estoy viendo un pequeño problema aquí, ves, todas estas categorías vacías, no los teníamos anteriormente pero cuando teníamos JavaScript, simplemente eliminamos todos los elementos de las categorías vacías. ¿Qué podemos hacer ahora? Porque en este momento, solo estamos seleccionando en función del emoji en sí. Bueno, hace casi dos años, creo que obtuvimos un nuevo selector CSS y un nuevo pseudo selector CSS llamado Has que nos permite establecer la visibilidad o establecer cualquier estilo CSS para un elemento basado en sus hijos, basado en sus descendientes. Así que básicamente, lo que podemos hacer es buscar cada categoría que no tenga ningún emoji que coincida con la consulta de búsqueda. Esto significa que las categorías que no tienen emojis que coinciden con la consulta de búsqueda se ocultarán automáticamente. Si empezamos a escribir ahora, el malo era bicicleta, ¿verdad? Sí, sus categorías desaparecen y todo lo que hicimos fue agregar esta línea. Ahora, concedido, Has no es muy eficiente y Has y Not son aún más ineficientes. Pero dado el hecho de que funciona mucho más rápido de lo que lo hacía antes, creo que es un buen compromiso. Y solo para ser justos, veamos cómo funciona con la estrangulación antes de juzgarlo viendo cómo funciona en una máquina de gama baja. Y si empiezo a escribir, ves que casi no hay retraso en absoluto. Funciona inmediatamente incluso aunque estamos estrangulando la CPU. Y si ejecutamos el perfilador, veamos si realmente hace una actualización completa del estado o no. Estamos viendo que lo único que realmente se actualiza es la barra de búsqueda. Así que creo que es una solución bastante buena para nosotros. Y creo que eso es prácticamente todo. Muchas gracias por acompañarme hoy. Si quieres ver más de mi trabajo, deberías visitar mi sitio web o cuenta de Twitter. Muchas gracias. Espero que hayas aprendido algo nuevo hoy. Me divertí mucho. ¡Adiós!