React
Explica cómo React compara tipos, posiciones y keys para decidir qué elementos conserva, actualiza, desmonta o reemplaza durante la reconciliación.
React conserva una instancia cuando el elemento mantiene . La identidad determina si el estado se conserva o se reinicia.
{isAdmin ? <AdminPanel /> : <UserPanel />}Como los tipos son distintos, React desmonta uno y monta el otro.
{isCompact ? <Profile compact /> : <Profile compact={false} />}El tipo es el mismo y ocupa la misma posición, por lo que el estado interno puede conservarse.
React compara el árbol anterior con el nuevo para decidir qué conservar, actualizar o reemplazar. No realiza una comparación arbitraria de todo con todo: utiliza reglas de posición, tipo y keys.
function Parent() {
function Child() {
return <input />;
}
return <Child />;
}Child es una función nueva en cada render. React puede tratarla como un tipo distinto y reiniciar su estado. Declara componentes en el nivel del módulo.
<Editor key={documentId} document={document} />Al cambiar documentId, React crea una instancia nueva y reinicia el estado local del editor.
La identidad no depende solo del contenido visual. Tipo, posición y key controlan qué instancia está representando React.
La identidad de una instancia no depende del lugar visual que ocupa en la pantalla, sino de cómo aparece dentro del árbol que devuelve su padre. React compara el árbol anterior y el nuevo y pregunta, para cada posición relevante, si sigue existiendo el mismo tipo y la misma key.
árbol anterior + árbol nuevo
↓
posición dentro del padre
↓
tipo del elemento
↓
key cuando pertenece a una colección
↓
preservar, mover, montar o desmontarSi la identidad se conserva, también pueden conservarse state, refs y nodos DOM. Si cambia, React crea una instancia nueva.
function Account({ isCompany }: { isCompany: boolean }) {
return isCompany
? <ProfileForm accountType="company" />
: <ProfileForm accountType="personal" />;
}Aunque el JSX está en ramas distintas, ambas producen ProfileForm en la misma posición. React puede conservar el state. Eso puede ser correcto si el formulario representa el mismo borrador con otra variante, o incorrecto si cada tipo de cuenta debe comenzar vacío.
Para expresar identidades distintas:
<ProfileForm
key={isCompany ? "company" : "personal"}
accountType={isCompany ? "company" : "personal"}
/>{isEditing ? <EditForm /> : <Preview />}Al cambiar entre tipos distintos, React desmonta el anterior y monta el nuevo. El state no se transfiere aunque ambos produzcan HTML parecido.
function Layout({ compact }: { compact: boolean }) {
if (compact) {
return (
<main>
<SearchBox />
</main>
);
}
return (
<>
<Header />
<main>
<SearchBox />
</main>
</>
);
}La posición lógica de SearchBox cambia entre árboles. Para razonar sobre preservación, dibuja la estructura y no te guíes únicamente por el nombre del componente.
function Parent() {
function Child() {
const [value, setValue] = useState("");
return <input value={value} onChange={(event) => setValue(event.target.value)} />;
}
return <Child />;
}Cada ejecución de Parent crea una función Child nueva. Su referencia funciona como un tipo nuevo, por lo que React puede desmontar la instancia anterior y perder el input. Declara componentes en el nivel del módulo.
Las keys también sirven para expresar identidad de entidades:
function ChatPanel({ contact }: { contact: Contact }) {
return <Chat key={contact.id} contact={contact} />;
}El cambio de contacto crea una conversación local nueva y evita que el borrador anterior aparezca en la siguiente persona.
No uses una key cambiante para forzar actualizaciones normales. Una key nueva no significa “renderiza otra vez”; significa “destruye esta instancia y crea otra”.
Cuando un estado se pierde o aparece junto al dato incorrecto, revisa:
null desmonta el subárbol producido por ese componente.<Activity mode="hidden"> puede preservar state bajo un modelo distinto de actividad.<ProfileForm /> pueden compartir state?Preservar y reiniciar estado aplica estas reglas para decidir deliberadamente cuándo conservar o descartar información local.