{"id":3540,"date":"2021-07-24T08:53:39","date_gmt":"2021-07-24T08:53:39","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/react-keys-yes-you-need-them-but-why-exactly\/"},"modified":"2026-04-24T11:30:22","modified_gmt":"2026-04-24T11:30:22","slug":"reaccionar-a-las-llaves-si-las-necesita-pero-por-que-exactamente","status":"publish","type":"post","link":"https:\/\/thecodest.co\/es\/blog\/react-keys-yes-you-need-them-but-why-exactly\/","title":{"rendered":"Llaves React, \u00a1S\u00ed! Las necesita, pero \u00bfpor qu\u00e9 exactamente?"},"content":{"rendered":"

Tambi\u00e9n hay una cosa m\u00e1s que usted necesita recordar sobre y que es la React<\/a> Clave<\/strong> cada elemento de la lista renderizada debe tenerlo. Este concepto es una de las primeras cosas que todo front-end desarrollador<\/a> aprende sobre React<\/strong> al principio de su viaje. Ahora vamos a profundizar un poco m\u00e1s para explorar por qu\u00e9 es as\u00ed y cu\u00e1ndo podemos tomar algunos atajos.<\/p>\n

\u00bfPor qu\u00e9 necesitamos este atributo clave?<\/h2>\n

La respuesta m\u00e1s sencilla aqu\u00ed ser\u00eda \"para optimizar las re-renders\", pero la m\u00e1s completa tiene que mencionar al menos el concepto de React Conciliaci\u00f3n<\/strong>. Este es el proceso de averiguar c\u00f3mo actualizar la interfaz de usuario de la manera m\u00e1s eficiente. Para hacerlo r\u00e1pido, React<\/strong> tiene que decidir qu\u00e9 partes del \u00e1rbol de elementos necesitan ser actualizadas y cu\u00e1les no. La cuesti\u00f3n es que puede haber muchos elementos en el DOM y comparar cada uno de ellos para decidir cu\u00e1l debe actualizarse es bastante costoso. Para optimizar esto, React<\/strong> implementa el algoritmo diffing que se basa en dos supuestos:<\/p>\n

    \n
  1. Dos tipos diferentes de elementos nunca ser\u00e1n iguales, as\u00ed que vuelve a renderizarlos.<\/li>\n
  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\u00e1s r\u00e1pidamente.<\/li>\n<\/ol>\n

    Bas\u00e1ndonos en esto, podemos concluir que cada Tecla React<\/strong> tambi\u00e9n deben ser \u00fanicos (dentro de la lista de elementos, no globalmente), y estables (no deben cambiar). Pero, \u00bfqu\u00e9 puede ocurrir cuando no son tat?<\/p>\n

    Unicidad, estabilidad e \u00edndice de matriz<\/h2>\n

    Como ya hemos dicho, Teclas React<\/strong> debe ser estable y \u00fanico. La forma m\u00e1s sencilla de conseguirlo es utilizar un ID \u00fanico (por ejemplo, de una base de datos) y pasarlo a cada elemento al mapear un array, f\u00e1cil. Pero, \u00bfqu\u00e9 pasa cuando no tenemos un ID, un nombre u otros identificadores \u00fanicos para pasar a cada elemento? Bueno, si no pasamos nada como clave, React<\/strong> tomar\u00e1 por defecto el \u00edndice actual del array (ya que es \u00fanico dentro de esa lista) para manejarlo por us<\/a>pero tambi\u00e9n nos dar\u00e1 un bonito mensaje de error en la consola:<\/p>\n

    \"\"<\/p>\n

    \u00bfPor qu\u00e9 ocurre esto? La respuesta es que el \u00edndice del array no es estable. Si el orden de los elementos cambia, cada una de las claves cambiar\u00e1 y tendremos un problema. Si React<\/strong> se encuentra con una situaci\u00f3n en la que se ha cambiado el orden en una lista de elementos, seguir\u00e1 intentando compararlos por las claves, lo que significa que cada comparaci\u00f3n acabar\u00e1 en la reconstrucci\u00f3n de un componente y, como resultado, toda la lista se reconstruir\u00e1 desde cero. Adem\u00e1s 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\u00e1gicos dif\u00edciles de depurar.<\/p>\n

    Excepciones<\/h2>\n

    Volvamos al \u00edndice del array. Si se utiliza como Tecla React<\/strong> puede ser tan problem\u00e1tico, \u00bfpor qu\u00e9 React<\/strong> lo utilizar\u00e1 por defecto? \u00bfHay alg\u00fan caso de uso en el que est\u00e9 bien hacerlo? La respuesta es s\u00ed, el caso de uso son las listas est\u00e1ticas. Si est\u00e1s seguro de que una lista que est\u00e1s renderizando nunca cambiar\u00e1 su orden, es seguro usar array index, pero recuerda, si tienes alg\u00fan identificador \u00fanico, es mejor usarlo en su lugar. Tambi\u00e9n puedes notar que pasar \u00edndices como claves har\u00e1 que la funci\u00f3n React<\/strong> 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\u00edcito de \u00edndices como claves se considera una mala pr\u00e1ctica y algunos linters podr\u00edan tratarlo como un error, mientras que React<\/strong> lo considera como una situaci\u00f3n en la que \"los desarrolladores saben lo que hacen\", as\u00ed que no lo hagas a menos que realmente sepas lo que est\u00e1s haciendo. Algunos ejemplos de cu\u00e1ndo puede estar bien usar esa excepci\u00f3n ser\u00edan un desplegable con una lista est\u00e1tica de botones o mostrar una lista de elementos con la informaci\u00f3n de la direcci\u00f3n de tu empresa.<\/p>\n

    Una alternativa a la clave basada en conjuntos de datos<\/h2>\n

    Supongamos que ninguna de las anteriores es una opci\u00f3n para nosotros. Por ejemplo, tenemos que mostrar una lista de elementos basada en el array de cadenas que puede ser duplicado, pero tambi\u00e9n puede ser reordenado. En este caso, no podemos usar ninguna de las cadenas porque no son \u00fanicas (esto tambi\u00e9n puede causar algunos bugs m\u00e1gicos), y el \u00edndice del array no es lo suficientemente bueno porque cambiaremos el orden de los elementos. La \u00faltima cosa en la que podemos confiar en situaciones como esta es el uso de algunos identificadores externos. Recuerda, tiene que ser estable, as\u00ed que no podemos recurrir simplemente a Math.random(). Hay algunos paquetes NPM que podemos utilizar en estos casos, por ejemplo el paquete \"uuid\"<\/a> paquete. Herramientas como \u00e9sta pueden ayudarnos a mantener nuestras claves de lista estables y \u00fanicas, incluso cuando no podemos encontrar identificadores apropiados dentro de nuestro datos<\/a> set. Deber\u00edamos considerar utilizar primero el ID de la base de datos y el \u00edndice del conjunto (si es posible), para minimizar el n\u00famero de paquetes utilizados por nuestro proyecto<\/a>.<\/p>\n

    Para terminar<\/h2>\n