React
Integra datos, estado, render, identidad, efectos, composición, Suspense, accesibilidad, rendimiento, arquitectura y producción en un modelo completo de React.
Aprender React no consiste en memorizar hooks. Consiste en comprender qué datos entran, qué estado debe conservarse, qué ocurre durante render, cómo React mantiene identidad y qué trabajo pertenece a eventos, effects o al servidor.
datos y eventos
↓
props + state + context
↓
render puro
↓
árbol de elementos
↓
reconciliation e identidad
↓
commit y DOM
↓
effects y sistemas externos
↓
composición y reutilización
↓
Suspense y transitions
↓
testing, accesibilidad y rendimiento
↓
arquitectura y producciónPregunta:
Las props son de solo lectura desde la perspectiva del componente. Context distribuye dependencias. Una store externa mantiene state fuera de React.
State recuerda información entre renders:
const [quantity, setQuantity] = useState(1);No guardes:
Pregunta:
¿Qué información necesita recordar React para producir el siguiente render?
Durante render React ejecuta componentes:
props + state + context
↓
component function
↓
React elementsRender debe ser puro e idempotente. Puede repetirse, interrumpirse o descartarse.
No hagas durante render:
Cada render observa una fotografía:
setCount(count + 1);
console.log(count); // value captured by this renderEl setter solicita otro render; no modifica la variable actual.
Para calcular desde el valor pendiente anterior:
setCount((current) => current + 1);React agrupa actualizaciones dentro de una interacción cuando puede. Los updater functions se procesan en orden.
No describas state simplemente como “asíncrono”; piensa en snapshots y colas.
React conserva state cuando coincide:
misma posición + mismo tipo + misma key
↓
state preservadoCambiar tipo, posición o key puede reiniciar la instancia.
Keys no solo eliminan warnings; comunican identidad entre hermanos.
React calcula el siguiente árbol y lo compara con el anterior. Usa tipo y key para decidir qué preservar.
No significa una comparación profunda universal ni garantiza que toda UI sea rápida.
Cuando el resultado cambia, React aplica operaciones al host environment:
render → reconciliation → commit → browser paintUn render no implica cambio del DOM. Un commit tampoco implica que el navegador ya haya pintado.
Un handler responde a una interacción concreta:
async function handleSubmit() {
await saveOrder();
}Eventos pertenecen a:
No conviertas la intención del usuario en state para observarla mediante effect.
Un effect sincroniza con algo externo:
render → commit → setup
change → cleanup → setup
unmount → cleanupÚsalo para conexiones, observers, timers, widgets y listeners.
Elimina effects usados para cálculos derivados o cadenas de state.
Una ref conserva un valor que no participa directamente en render:
const inputRef = useRef<HTMLInputElement>(null);Casos:
No la uses como state oculto para evitar renders necesarios.
Context transporta un valor a descendants. No administra state automáticamente ni reemplaza caches.
Antes de usarlo evalúa props, composición y colocación del state.
Un reducer concentra transiciones:
state + action → next stateAporta cuando múltiples eventos modifican state relacionado. No lo uses para envolver setters sin dominio.
Un custom hook reutiliza lógica, no state compartido automáticamente.
Cada llamada tiene su propia instancia de hooks.
Diseña su API alrededor de un caso de uso, no de una abstracción genérica sin propósito.
React favorece composición:
Crea componentes según responsabilidad, no por cantidad de líneas.
Decide ownership:
Modela loading, errors, success y reset. El servidor siempre valida de nuevo.
Diferencia:
client state
→ selección, modal, input
server state
→ datos remotos, cache, stale, refetchReact no prescribe una única estrategia. Evalúa framework loaders, Server Components o librerías de cache.
Suspense coordina una boundary cuando una fuente compatible está pendiente. No convierte cualquier fetch en suspendible.
Combínalo con Error Boundaries y transitions.
Marcan actualizaciones no urgentes. Mantienen inputs responsivos y pueden conservar UI visible.
No hacen el trabajo más rápido ni ejecutan React en varios hilos.
SSR produce HTML inicial. Hydration conecta ese HTML con React cliente.
El primer render debe coincidir para evitar mismatches.
RSC ejecuta componentes en servidor sin enviar su implementación al cliente. Requiere framework.
No confundir:
SSR → HTML inicial
RSC → representación de componentes servidor
Client Component → región con capacidades clienteReact no corrige HTML incorrecto. Evalúa:
La accesibilidad es parte de la API del componente.
Mide antes de optimizar:
interacción lenta
↓
medir red + React + navegador
↓
encontrar trabajo dominante
↓
corregir y volver a medirMemoización no es una regla de corrección. Re-render no equivale a problema.
Prueba comportamiento observable:
Prefiere queries por role y accessible name.
React escapa texto, pero todavía existen:
dangerouslySetInnerHTML.La seguridad se valida en cada límite.
Decide ownership y dependencias:
feature
├─ UI
├─ hooks
├─ domain
├─ data access
└─ public APINo existe una estructura universal. Coloca código cerca de donde cambia y crea fronteras después de observar responsabilidades reales.
síntoma
↓
¿error de JavaScript, navegador, React o framework?
↓
reproducción mínima
↓
props/state/context del render afectado
↓
identity y keys
↓
handlers y effects
↓
DOM, network y serverNo empieces añadiendo memoización o effects. Aísla primero la causa.
input urgente
↓ query state
useDeferredValue
↓
resultados no urgentes
↓
Suspense boundary
↓
data cachePreguntas:
native form semantics
↓
validation
↓
Action / submit handler
↓
pending + optimistic state
↓
confirmed result or rollbackConsidera idempotencia, errores, focus y autorización servidor.
JavaScript
→ closures, referencias, asincronía y módulos
TypeScript
→ contratos de props, reducers, refs y boundaries
HTML
→ semántica, formularios, landmarks y accesibilidad
CSS
→ layout, presentación, responsive y estados visuales
React
→ componentes, state, identity y sincronización
Next.js
→ routing, rendering por ruta, RSC, cache y deploymentReact no reemplaza los anteriores; los coordina para construir interfaces.
qué datos recibe
→ qué state necesita
→ qué ocurre durante render
→ cómo conserva identity
→ qué provoca update
→ qué pertenece al event
→ qué sincroniza un effect
→ cómo compone la UI
→ cómo se prueba, optimiza y entregaEse flujo importa más que memorizar una lista de APIs.
Construye una aplicación pequeña sin framework que incluya formulario, lista con keys, Context acotado, effect externo y tests. Después estudia Next.js para ver cómo un framework añade routing, rendering por ruta, Server Components, cache y deployment sobre este modelo.