React
APIs avanzadas, legado y compatibilidad
Clasifica APIs avanzadas, especializadas y legacy de React según importancia, estabilidad, versión y dependencia de frameworks o tooling.
- Última actualización
- Actualizada
- Nivel
- Profundización
React
Clasifica APIs avanzadas, especializadas y legacy de React según importancia, estabilidad, versión y dependencia de frameworks o tooling.
No todas las APIs de React tienen el mismo peso. Algunas forman el modelo esencial; otras resuelven integraciones especializadas, existen por compatibilidad o dependen de tooling y frameworks.
Clasifica cada API por dos ejes:
importancia
→ esencial | especializada | legado
estado
→ estable | experimental | dependiente de framework | dependiente de versiónNo estudies APIs avanzadas antes de comprender render, identity, state, events y effects.
Clasificación: especializada, estable.
Genera IDs únicos compatibles con server rendering:
const id = useId();
return <input id={id} aria-describedby={`${id}-help`} />;Úsalo para relaciones de accesibilidad. No para keys de listas ni IDs de datos.
Clasificación: especializada, estable.
Limita la API expuesta mediante una ref:
useImperativeHandle(ref, () => ({
focus() {
inputRef.current?.focus();
},
}));Prefiere props y composición. Expón una API imperativa pequeña cuando una integración realmente la necesita.
En React 19, function components pueden recibir ref como prop bajo el modelo moderno:
function TextInput({ ref, ...props }: React.ComponentProps<"input">) {
return <input ref={ref} {...props} />;
}forwardRef continúa apareciendo en React 18, librerías y código existente. Trátalo como compatibilidad, no como la única forma universal sin revisar la versión objetivo.
Clasificación: especializada, estable.
Añade una etiqueta a custom hooks en DevTools:
useDebugValue(isOnline ? "Online" : "Offline");No modifica comportamiento y rara vez es necesario en hooks internos pequeños.
Clasificación: especializada, estable.
Integra stores externas con snapshots consistentes:
const value = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);Es la base adecuada para autores de stores y wrappers sobre browser APIs. Para state local sigue usando useState.
Clasificación: especializada para autores de librerías, estable.
Permite que librerías CSS-in-JS inserten estilos en una fase específica antes de layout effects. No es una alternativa para effects comunes ni para componentes de producto.
Clasificación: especializada, estable desde React 19.2.
Separa lógica no reactiva dentro de un effect y permite leer valores actuales sin reconectar el sistema principal.
No sirve para ocultar dependencias reales ni reemplazar event handlers.
Clasificación: avanzada, estable en React 19 bajo contratos compatibles.
Puede leer Promises o context:
const data = use(dataPromise);Cuando la Promise está pendiente, el componente suspende. La fuente debe tener identidad y caché adecuadas. Su uso práctico suele depender de frameworks o recursos compatibles.
Clasificación: avanzada, estable en React 19.
Permite representar un estado optimista durante una Action:
const [optimisticItems, addOptimisticItem] = useOptimistic(items, reducer);No resuelve por sí solo rollback, IDs temporales, duplicados ni consistencia del servidor.
Clasificación: avanzada, estable en React 19.
Coordina resultado y pending de una Action:
const [state, formAction, isPending] = useActionState(action, initialState);Su utilidad aumenta en integraciones con formularios y progressive enhancement.
Clasificación: avanzada, estable en React DOM.
Lee el estado del formulario padre desde un descendiente:
const { pending } = useFormStatus();Debe utilizarse dentro del árbol del formulario correspondiente.
Clasificación: avanzada, estable en React 19.2.
Permite ocultar y revelar regiones preservando parte de su state y coordinando effects según el modo:
<Activity mode={visible ? "visible" : "hidden"}>
<Sidebar />
</Activity>No es CSS display: none ni reemplazo universal del render condicional. Evalúa memoria y comportamiento de effects.
Clasificación: avanzada, estable.
startTransition, useTransition y useDeferredValue priorizan actualizaciones no urgentes. No ejecutan componentes en múltiples hilos ni hacen el trabajo más rápido.
Clasificación: tooling moderno, dependiente de configuración.
Aplica memoización automática a código compatible. Requiere Rules of React y soporte del build.
Directivas como "use memo" o "use no memo" pertenecen a casos de control del compiler; no son requisitos para componentes normales.
Verifica la versión del compiler y su integración concreta antes de documentar configuración.
Clasificación: arquitectura moderna, dependiente de framework e infraestructura.
El modelo es estable, pero las APIs de integración para bundlers y servidores pueden evolucionar. No existe una activación simple en una SPA básica.
Clasificación: dependiente de framework e integración.
"use server" marca funciones bajo un transporte compatible. No convierte un componente en Server Component.
Las operaciones necesitan validación, autorización y manejo de errores.
Clasificación: esencial para recuperación, API base mediante class component.
Actualmente la implementación directa usa lifecycle methods de clases:
class ErrorBoundary extends React.Component {
static getDerivedStateFromError() {
return { hasError: true };
}
}Frameworks y librerías ofrecen wrappers modernos, pero la primitive base continúa siendo class-based.
Clasificación: legado compatible.
Continúan soportados para código existente. No son la base recomendada para componentes nuevos.
Conceptos relevantes:
this.props.this.state.createRef.No intentes traducir cada lifecycle mecánicamente a un único useEffect; primero identifica la sincronización real.
Clasificación: legado.
componentDidMount.componentDidUpdate.componentWillUnmount.getDerivedStateFromProps.getSnapshotBeforeUpdate.Algunos lifecycles antiguos UNSAFE_ reflejan modelos incompatibles con rendering moderno y no deben enseñarse como patrón actual.
Clasificación: estable, común en clases.
Crea un objeto ref nuevo. En function components normalmente se usa useRef para conservar la misma ref entre renders.
Clasificación: especializada, legado frecuente.
Clona un elemento con props nuevas. Puede crear acoplamiento y APIs frágiles. Prefiere composición, Context o render props cuando expresen mejor la relación.
Clasificación: especializada.
Children.map, Children.count y Children.toArray operan sobre la estructura opaca de children.
No inspeccionan arbitrariamente el árbol renderizado de componentes. Úsalas con cuidado en APIs de composición.
APIs principales:
createRoot para client rendering.hydrateRoot para HTML existente generado por servidor.createPortal para renderizar en otro nodo DOM.No mezcles createRoot con markup que debe hidratarse.
APIs conceptuales:
renderToString para escenarios sin streaming o compatibilidad.El framework suele elegir y coordinar la API correcta.
ReactDOM.render y hydrate pertenecen a React 17 y modelos anteriores. Para código moderno usa createRoot y hydrateRoot.
Clasificación: herramienta estable de desarrollo.
Puede repetir renders, effects y ref callbacks bajo comprobaciones específicas. No produce el mismo comportamiento duplicado en producción.
No elimines Strict Mode únicamente para ocultar una impureza.
React publica canales experimentales o canary para frameworks y evaluación.
Reglas:
Mantén compatibles:
react.react-dom.Una nota durable explica el modelo; una sección de compatibilidad registra cambios de firma o estabilidad.
| API | Importancia | Estado |
|---|---|---|
| useState, useEffect, useContext | Esencial | Estable |
| useId, useImperativeHandle | Especializada | Estable |
| useSyncExternalStore | Especializada | Estable |
| useEffectEvent, Activity | Avanzada | React 19.2 |
| use, Actions, useOptimistic | Avanzada | React 19 |
| Server Components | Arquitectura | Framework requerido |
| Class components | Legado | Soportado |
| ReactDOM.render | Legado | Reemplazado por createRoot |
Antes de usar una API reciente:
forwardRef como única API sin indicar versión.useInsertionEffect en código de producto.use con await universal en cliente."use server" con Server Component.useInsertionEffect no pertenece a componentes normales?forwardRef?Modelo mental completo de React conecta todas las piezas de la ruta y ofrece checklists para componentes y aplicaciones.