Mejores Prácticas de Patrones React

Un resumen condensado de las 25 mejores prácticas más importantes extraídas de todas las páginas de esta sección.

1. Prefiere Slots Nombrados en Lugar de children Único: Sobrecargar children para diseños multi-región pierde el control de colocación; expone props nombrados de ReactNode — ({ header, sidebar, footer }: { header: ReactNode; sidebar: ReactNode; footer: ReactNode }) — para que los consumidores puedan llenar cada slot independientemente y mantengas TypeScript de su lado.
2. Elige ReactNode, ReactElement o ComponentType: ReactNode acepta strings/null/arrays (mejor para slots y children), ReactElement se reduce a un único elemento JSX, y ComponentType<P> es un componente que puedes instanciar — elige intencionadamente porque escriben estilos de composición diferentes.
3. Construye Componentes Compuestos en Context: Una raíz compuesta es propietaria del estado y lo publica a través de context para que Root.Item, Root.Trigger y Root.Content funcionen a cualquier profundidad JSX — protege el hook del consumidor con un error lanzado cuando se usa fuera de la raíz en lugar de devolver un null silencioso.
4. Marca Raíces Compuestas como "use client": Los componentes compuestos dependen de createContext y useState, por lo que el archivo raíz debe ser un Client Component en Next.js — y usa un context de dos niveles (AccordionContext + ItemContext por elemento) para limitar la identidad a cada elemento.
5. Divide Contextos de Estado y Acciones: Pon el estado en un context y acciones memoizadas en otro para que los botones que solo despachan nunca se re-renderizen en cambios de estado; el dispatch de useReducer ya es estable en React y no necesita memoización adicional.
6. Nunca Inlines Valores de Context de Objeto: Pasar un literal de objeto fresco como el value del context en cada renderizado padre anula la memoización y re-renderiza cada consumidor; envuelve el valor en useMemo con clave en el estado real, o divide contexts para que los consumidores solo actualizadores sean inmunes.
7. Alcance Proveedores Estrechamente: Monta un proveedor en el subtree más pequeño que realmente lo necesita; un proveedor en la raíz dispersa re-renderizados en todas las páginas no relacionadas y hace que la división de código perezoso sea menos efectiva.
8. Soporta Tanto Controlado como No Controlado: Los componentes de biblioteca deben detectar el modo controlado a través de value !== undefined y retroceder al estado interno — const [inner, setInner] = useState(defaultValue); const val = value !== undefined ? value : inner — envuelve la decisión en un hook reutilizable useControllableState y nunca cambies modos después del montaje.
9. No Desaceleres Actualizaciones de Estado para Inputs Controlados: Desacelerar el onChange que establece estado congela la entrada porque el valor del DOM se queda atrás del usuario; desacelera efectos secundarios (búsqueda, autosave) mientras siempre actualizas el estado controlado sincronamente.
10. Los Límites de Error Necesitan getDerivedStateFromError: Implementa getDerivedStateFromError (derivación de estado de fase de renderizado puro) para el cambio de fallback e componentDidCatch (post-commit) para registrar en Sentry; no hay equivalente de hook, así que usa una clase o react-error-boundary.
11. Restablece Límites a través de resetKeys + key: Usa resetKeys para que el límite se recupere automáticamente cuando cambie un parámetro de ruta, y pon una key en los hijos del límite para que limpiar hasError fuerce un remontaje — simplemente restablecer el estado deja el subtree en su estado corrupto.
12. Sabe Qué Pierden los Límites de Error: No capturan errores en manejadores de eventos, código asincrónico, SSR o el límite mismo; envuelve esos en try/catch explícito, y en Next.js confía en la convención de nivel de ruta error.tsx con error.digest para errores del servidor.
13. Llama HOCs en Alcance de Módulo: Llamar a withAuth(Component) dentro del cuerpo de otro componente crea un tipo de componente completamente nuevo en cada renderizado y destruye estado; aplica HOCs una vez en el alcance del módulo — const ProtectedPage = withAuth(DashboardPage) — y siempre establece un displayName significativo.
14. Reenvía Refs y Estáticos a través de HOCs: Los HOCs descartan refs y métodos estáticos por defecto, así que envuelve con React.forwardRef internamente y copia estáticos con hoist-non-react-statics — de lo contrario, los consumidores pierden mangos imperativos y constantes adjuntas.
15. Perfila Antes de que Memoices: memo/useMemo/useCallback prematuro agrega sobrecarga de comparación que puede ralentizar componentes rápidos; usa el Profiler de React DevTools para identificar puntos calientes reales y recuerda que onClick={() => …} o style={{…}} en línea anula memo mediante referencias frescas.
16. useTransition es Dueño, useDeferredValue Recibe: Usa useTransition cuando eres dueño del establecedor de estado y quieres marcar la actualización como no urgente; usa useDeferredValue para retrasar un valor que recibes como prop, y compáralo con el valor actual para mostrar un indicador de obsoleto sutil.
17. Virtualiza Listas Grandes: Decenas de miles de filas no pueden ser rescatadas por memo — llega a react-virtual/react-window o CSS content-visibility: auto, y mantén keys estables (IDs, no índices) para que las filas no se remunten al desplazarse.
18. createPortal Mantiene el Árbol React: Los eventos se propagan a través del árbol React (no del árbol DOM) a través de portales, así que los clics dentro de un modal aún golpean ancestros React — llama a stopPropagation cuando necesites un corte limpio, y atrapa el enfoque además de guardarlo/restaurarlo para modales reales.
19. Protege Portales para SSR: document.body bloquea el renderizado del servidor, así que cierra el portal con una bandera mounted establecida por useEffect — const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []) — o marca el componente como "use client" en Next.js, y crea un nodo de contenedor dedicado en lugar de amontonar divs vacíos en body.
20. Ten Cuidado con Render Props en Línea: Un children={(state) => <X />} en línea crea una referencia de función nueva en cada renderizado e interrumpe React.memo en el padre; eleva la función o acepta que memo no se aplicará aquí, y recuerda que los hooks no pueden ser llamados dentro de una función render-prop.
21. Exporta Colecciones de Props: Los componentes sin cabeza deben devolver objetos de props dispersables que agrupen manejadores de eventos más atributos ARIA — <button {...triggerProps}>Open</button> <div {...contentProps}>…</div> — los consumidores no pueden olvidar el cableado de accesibilidad porque se envía con la colección.
22. Modela Estado como Uniones Discriminadas: Reemplaza la sopa booleana isLoading/isError/hasData con un único status de unión etiquetada para que combinaciones imposibles sean irreproducibles; cada estado lleva solo los datos válidos para ese estado.
23. Mantén Reductores Puros: Bajo Strict Mode y renderizado concurrente, React puede llamar a un reductor múltiples veces, así que nunca busques, escribas o registres dentro de él — y siempre termina con return state para eventos desconocidos para que transiciones no manejadas no produzcan undefined.
24. Crea Promesas de Suspense Fuera del Renderizado: Crear una promesa en el cuerpo del componente dispara un bucle de suspensión infinito porque use(promise) trata una nueva referencia como una nueva solicitud pendiente; eleva la creación de promesas a un padre, un caché o un manejador de eventos.
25. Empareja Suspense con Límite de Error y Transición: Una promesa rechazada sin un límite de error ancestro desmonta el árbol completo; también usa useTransition cuando reemplazas la interfaz de usuario impulsada por Suspense para que las búsquedas rápidas no destelleen un esqueleto, y anida límites para que el contenido secundario se transmita después del shell crítico.