Cómo usar las teclas React para evitar conflictos de componentes

El enfoque de React puede ser bastante complicado y es posible que encuentre un comportamiento inesperado o incluso errores sutiles. Deshacerse de tales errores puede ser bastante difícil si no está familiarizado con su causa.

Un error particular surge cuando renderizas condicionalmente el mismo componente con diferentes propiedades. Explore este error en detalle y descubra cómo usar las teclas React para resolverlo.

Los componentes de React no siempre son independientes

Su sintaxis sencilla es una de las principales razones deberías aprender a reaccionar. Pero, a pesar de muchas ventajas, el marco no está exento de errores.

El error del que aprenderá aquí ocurre cuando está renderizando condicionalmente el mismo componente, pero pasándole accesorios diferentes.

En casos como este, React asumirá que los dos componentes son iguales, por lo que no se molestará en renderizar el segundo componente. Como resultado, cualquier estado que defina en el primer componente persistirá entre renderizaciones.

Para demostrarlo, tome este ejemplo. Primero tienes lo siguiente Encimera componente:

import { useState, useEffect } from"react"
exportfunctionCounter({name}) {
const [count, setCount] = useState(0)
return(


{name}</div>
 setCount(c => c - 1)}> - </button>


 setCount(c => c + 1)}> + </button>
 </div>
 )
}

Este Encimera componente acepta un nombre del padre a través de la desestructuración de objetos, que es una forma de usar accesorios en React. Luego traduce el nombre en un. También devuelve dos botones: uno para decrementar el contar en estado y el otro para incrementarlo.

Tenga en cuenta que no hay nada malo con el código anterior. El error proviene del siguiente bloque de código (el componente de la aplicación), que usa el contador:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? <Countername="Kingsley" />: <Countername="Sally" /> }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

De forma predeterminada, el código anterior representa el contador llamado Kingsley. Si incrementa el contador a cinco y hace clic en el Intercambio botón, generará el segundo contador llamado Sally.

Pero el problema es que el contador no se restablecerá a su estado predeterminado de cero después de que los haya cambiado.

Este error ocurre porque ambos estados representan los mismos elementos en el mismo orden. React no sabe que el contador "Kingsley" es diferente del contador "Sally". La única diferencia está en el nombre prop pero, desafortunadamente, React no usa eso para diferenciar elementos.

Puede solucionar este problema de dos maneras. La primera es cambiando tu DOM y haciendo que los dos árboles sean diferentes. Esto requiere que entiendas que es el DOM. Por ejemplo, puede envolver el primer contador dentro de un elemento y el segundo dentro de un elemento:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return (


 { isKingsley? 
 (<div>
"Kingsley" /> 
 </div>)
: 
 (<section>
"Sally" /> 
 </section>)
 }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Si incrementa el contador "Kingsley" y hace clic en Intercambio, el estado se restablece a 0. Nuevamente, esto sucede porque la estructura de los dos árboles DOM es diferente.

Cuando el esKingsley variable es verdadero, la estructura será división >división > Encimera (un div que contiene un div, que contiene un contador). Cuando cambia el estado del contador con el botón, la estructura se vuelve división > sección > Encimera. Debido a esta discrepancia, React generará automáticamente un contador nuevo con un estado de reinicio.

Es posible que no siempre desee alterar la estructura de su marcado de esta manera. La segunda forma de resolver este error evita la necesidad de un marcado diferente.

Uso de claves para renderizar un componente nuevo

Las teclas permiten a React diferenciar entre elementos durante el proceso de renderizado. Entonces, si tiene dos elementos que son exactamente iguales y desea señalar a React que uno es diferente del otro, debe establecer un atributo clave único en cada elemento.

Agregue una clave a cada contador, así:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? 
"Kingsley" name="Kingsley" />: 
"Sally" name="Sally" /> 
 }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Ahora, cuando incrementas el contador "Kingsley" y haces clic Intercambio, React genera un contador nuevo y restablece el estado a cero.

También debe usar claves cuando renderiza una matriz de elementos del mismo tipo, ya que React no reconocerá la diferencia entre cada elemento.

exportdefaultfunctionApp() {
const names = ["Kingsley", "John", "Ahmed"]
return(


 { names.map((name, index) => {
return<Counterkey={index}name={name} />
 })}
 </div>
 )
}

Cuando asigna claves, React asociará un contador separado con cada elemento. De esa manera, puede reflejar cualquier cambio que realice en la matriz.

Otro caso de uso de clave avanzada

También puede usar claves para asociar un elemento con otro elemento. Por ejemplo, es posible que desee asociar un elemento de entrada con diferentes elementos según el valor de una variable de estado.

Para demostrarlo, modifique el componente de la aplicación:

import { useState } from"react"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? <div>Kingsley's Scorediv>: <div>Sally's scorediv> }
"Kingsley": "Sally" } type="number"/>


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Ahora, cada vez que cambia entre el elementos para Kingsley y Sally, cambiará automáticamente el atributo clave de su entrada entre "Kingsley" y "Sally". Esto obligará a React a volver a renderizar completamente el elemento de entrada con cada clic del botón.

Más consejos para optimizar las aplicaciones de React

La optimización del código es clave para crear una experiencia de usuario agradable en su aplicación web o móvil. Conocer las diferentes técnicas de optimización puede ayudarlo a aprovechar al máximo sus aplicaciones React.

La mejor parte es que también puede aplicar la mayoría de estas técnicas de optimización con aplicaciones React Native.