Llaves React, ¡Sí! Las necesita, pero ¿por qué exactamente?

También hay una cosa más que usted necesita recordar sobre y que es la React Llave cada elemento de la lista renderizada debe tenerlo. Este concepto es una de las primeras cosas que todo desarrollador front-end aprende sobre React al principio de su viaje. Ahora vamos a profundizar un poco más para explorar por qué es así y cuándo podemos tomar algunos atajos.

¿Por qué necesitamos este atributo clave?

La respuesta más sencilla aquí sería "para optimizar las re-renders", pero la más completa tiene que mencionar al menos el concepto de React Conciliación. Este es el proceso de averiguar cómo actualizar la interfaz de usuario de la manera más eficiente. Para hacerlo rápido, React tiene que decidir qué partes del árbol de elementos necesitan ser actualizadas y cuáles no. La cuestión es que puede haber muchos elementos en el DOM y comparar cada uno de ellos para decidir cuál debe actualizarse es bastante costoso. Para optimizar esto, React implementa el algoritmo diffing que se basa en dos supuestos:

1. Dos tipos diferentes de elementos nunca serán iguales, así que vuelve a renderizarlos.
2. Los desarrolladores pueden ayudar manualmente a optimizar ese proceso mediante atributos clave, de modo que los elementos, aunque su orden haya cambiado, puedan localizarse y compararse más rápidamente.

Basándonos en esto, podemos concluir que cada Tecla React también deben ser únicos (dentro de la lista de elementos, no globalmente), y estables (no deben cambiar). Pero, ¿qué puede ocurrir cuando no son tat?

Unicidad, estabilidad e índice de matriz

Como ya hemos dicho, Teclas React debe ser estable y único. La forma más sencilla de conseguirlo es utilizar un ID único (por ejemplo, de una base de datos) y pasarlo a cada elemento al mapear un array, fácil. Pero, ¿qué pasa cuando no tenemos un ID, un nombre u otros identificadores únicos para pasar a cada elemento? Bueno, si no pasamos nada como clave, React tomará el índice actual del array por defecto (ya que es único dentro de esa lista) para manejarlo por nosotros, pero también nos dará un bonito mensaje de error en la consola:

¿Por qué ocurre esto? La respuesta es que el índice del array no es estable. Si el orden de los elementos cambia, cada una de las claves cambiará y tendremos un problema. Si React se encuentra con una situación en la que se ha cambiado el orden en una lista de elementos, seguirá intentando compararlos por las claves, lo que significa que cada comparación acabará en la reconstrucción de un componente y, como resultado, toda la lista se reconstruirá desde cero. Además de eso, podemos encontrarnos con algunos problemas inesperados, como actualizaciones del estado de los componentes para elementos como entradas no controladas y otros problemas mágicos difíciles de depurar.

Excepciones

Volvamos al índice del array. Si se utiliza como Tecla React puede ser tan problemático, ¿por qué React lo utilizará por defecto? ¿Hay algún caso de uso en el que esté bien hacerlo? La respuesta es sí, el caso de uso son las listas estáticas. Si estás seguro de que una lista que estás renderizando nunca cambiará su orden, es seguro usar array index, pero recuerda, si tienes algún identificador único, es mejor usarlo en su lugar. También puedes notar que pasar índices como claves hará que la función React al mismo tiempo que algunos de los linters externos muestran un error o una advertencia. Esto se debe al hecho de que el uso explícito de índices como claves se considera una mala práctica y algunos linters podrían tratarlo como un error, mientras que React lo considera como una situación en la que "los desarrolladores saben lo que hacen", así que no lo hagas a menos que realmente sepas lo que estás haciendo. Algunos ejemplos de cuándo puede estar bien usar esa excepción serían un desplegable con una lista estática de botones o mostrar una lista de elementos con la información de la dirección de tu empresa.

Una alternativa a la clave basada en conjuntos de datos

Supongamos que ninguna de las anteriores es una opción para nosotros. Por ejemplo, tenemos que mostrar una lista de elementos basada en el array de cadenas que puede ser duplicado, pero también puede ser reordenado. En este caso, no podemos usar ninguna de las cadenas porque no son únicas (esto también puede causar algunos bugs mágicos), y el índice del array no es lo suficientemente bueno porque cambiaremos el orden de los elementos. La última cosa en la que podemos confiar en situaciones como esta es el uso de algunos identificadores externos. Recuerda, tiene que ser estable, así que no podemos recurrir simplemente a Math.random(). Hay algunos paquetes NPM que podemos utilizar en estos casos, por ejemplo el paquete "uuid" paquete. Herramientas como ésa pueden ayudarnos a mantener las claves de nuestra lista estables y únicas, incluso cuando no podamos encontrar identificadores adecuados dentro de nuestro conjunto de datos. Deberíamos considerar utilizar primero el ID de la base de datos y el índice del array (si es posible), para minimizar el número de paquetes utilizados por nuestro proyecto.

Para terminar

• Cada elemento de la lista de React deben tener un atributo clave único y estable,
• Teclas React se utilizan para acelerar el Proceso de conciliación y evitar la reconstrucción innecesaria de elementos en las listas,
• La mejor fuente de claves es el ID único de entrada de datos (por ejemplo, de la base de datos),
• Puede utilizar el índice de la matriz como clave, pero sólo para una lista estática cuyo orden no cambiará,
• Si no hay otra forma de obtener claves estables y únicas, considere el uso de algunos proveedores de ID externos, por ejemplo, el paquete "uuid".

Más información:

Por qué debería (probablemente) utilizar Typescript

¿Cómo no matar un proyecto con malas prácticas de codificación?

Estrategias de obtención de datos en NextJS