Mejores Prácticas de React Hooks

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

1. Prefija los Hooks Personalizados Con use: Comienza el nombre de cada hook personalizado con use para que el plugin ESLint rules-of-hooks realmente ejecute las reglas; sin el prefijo, las llamadas condicionales ilegales siguen rompiendo React pero ningún error de linting las detecta.
2. Retorna Tuplas Con as const: Devolver [value, setValue] as const proporciona a los consumidores readonly [T1, T2] con tipos de desestructuración correctos; sin as const, TypeScript amplía a (T1 | T2)[] y se pierde el orden de la tupla.
3. Importa useActionState Desde react: En React 19, usa useActionState desde "react" — no el deprecado useFormState desde "react-dom" — y recuerda que la nueva firma devuelve [state, formAction, isPending] con estado pending incluido.
4. Dispersa prevState en Reducers de Acciones: La firma de la acción (prevState, formData) => newState reemplaza el estado completamente, así que dispersa ...prevState cuando solo quieras fusionar un campo; olvidar esto borra cada campo sin tocar en cada envío.
5. useCallback Solo Ayuda a Consumidores Memoizados: useCallback es inútil por sí solo — previene re-renderizados solo cuando un hijo React.memo o un efecto/memo de dependencia realmente compara identidad, así que no lo rocíes en cada manejador.
6. Prefiere dispatch Estable Sobre useCallback: El dispatch de useReducer es permanentemente estable en los renders, así que pasarlo hacia abajo es a menudo más limpio que envolver manejadores en useCallback en cada nivel; lo mismo aplica a los setters de estado.
7. Memoiza el Valor de Context: Pasar un objeto literal fresco como <Context value={{…}}> re-renderiza cada consumidor en cada render del padre; envuelve el valor en useMemo — <Ctx value={useMemo(() => ({ theme, toggle }), [theme, toggle])}> — o divide el estado y el actualizador en contextos separados para detener la avalancha.
8. El Contexto Por Defecto No Es Estado Inicial: El argumento a createContext(default) se usa solo cuando ningún Provider envuelve el árbol, no como el valor inicial del Provider; confía en esto para protegerte contra proveedores faltantes con un hook personalizado que lance si el contexto es null.
9. Empareja useDeferredValue Con React.memo: useDeferredValue aplaza el renderizado de consumidores, así que el hijo pesado debe estar envuelto en React.memo o el padre lo re-renderiza con el valor actual de todas formas, haciendo que el hook sea un no-op.
10. Strict Mode Ejecuta Efectos Dos Veces: En desarrollo, Strict Mode monta → desmonta → remonta cada componente para exponer limpieza faltante; trátalo como una característica y haz cada efecto idempotente con un retorno de limpieza apropiado.
11. Cancela Búsquedas Propensas a Carreras: Los cambios rápidos de dependencias pueden entregar respuestas más antiguas después de las más nuevas, así que empareja cada efecto de búsqueda con un AbortController y aborta en la limpieza para descartar resultados obsoletos: useEffect(() => { const ac = new AbortController(); fetch(url, { signal: ac.signal }); return () => ac.abort(); }, [url]).
12. No Pases Funciones Async a useEffect: Una función async devuelve una Promise, no una limpieza, así que define una función async interna y llámala: useEffect(() => { async function load() { await fetch(url) } load(); }, [url]) — React advierte sobre este patrón porque la Promise devuelta nunca se espera para la limpieza.
13. Usa useId Solo para IDs de Accesibilidad: useId devuelve un identificador estable SSR por posición de árbol — perfecto para htmlFor, aria-describedby y cableado de formularios — pero nunca para keys de lista (un ID por llamada) y nunca dentro de bucles o condicionales.
14. Establece identifierPrefix para Múltiples Raíces: Dos raíces React en la misma página generan valores useId colisionantes por defecto; pasa identifierPrefix a cada createRoot/hydrateRoot para que micro-frontends o widgets incrustados se mantengan distintos.
15. useMemo No Es una Garantía: React puede descartar entradas de memoización (por ejemplo en componentes fuera de pantalla) y recomputar después, así que nunca confíes en useMemo para corrección — úsalo para rendimiento y estabilidad de referencia, no semántica de programa.
16. Sin Efectos Secundarios en useMemo: La fábrica se ejecuta durante el renderizado, así que debe ser pura — logging, búsqueda o escritura en localStorage dentro de useMemo rompe el modelo de renderizado de React y se comporta mal bajo Strict Mode y renderizado concurrente.
17. Llama addOptimistic Dentro de una Transición: La actualización de useOptimistic desaparece silenciosamente a menos que addOptimistic se ejecute dentro de una acción de formulario, manejador de Server Action o startTransition explícito; la superposición solo persiste mientras una transición está pendiente, con reversión automática en error.
18. Mantén los Reducers Puros: El reducer se ejecuta durante el renderizado, así que nunca mutes el estado — return { ...state, count: state.count + 1 } no state.count++; return state — nunca busques ni escribas en almacenamiento, e incluye siempre una rama default: return state o acciones desconocidas limpian el estado a undefined.
19. Inicializa Perezosamente el Estado Costoso: Escribe useState(() => computeInitial()) y useReducer(reducer, arg, init) para que el inicializador se ejecute solo al montar; useState(computeInitial()) ejecuta el cálculo en cada renderizado y desecha el resultado.
20. Las Lecturas de Ref.current Durante el Renderizado No Son Seguras: Bajo renderizado concurrente, .current puede reflejar un paso de renderizado diferente del que se pinta, así que lee refs dentro de efectos, manejadores de eventos o layout effects — no inline en el cuerpo del componente.
21. Los Refs del DOM Son null Hasta el Commit: Un useRef adjunto a un nodo del DOM es null durante el primer renderizado, así que intentar tocar ref.current.focus() inline lanza un error; hazlo en useEffect, useLayoutEffect o un manejador, y recuerda que el ref de un elemento renderizado condicionalmente es null mientras está oculto.
22. Prefiere setState(prev => …): Tres llamadas directas a setCount(count + 1) en el mismo manejador se incrementan solo una vez porque todas se cierran sobre el mismo count obsoleto; la forma del actualizador setCount(prev => prev + 1) se compone correctamente bajo el batching automático de React 18+.
23. Lazy useState Necesita una Callback: useState(() => parseJSON(localStorage.x)) ejecuta el análisis solo al montar; useState(parseJSON(localStorage.x)) lo ejecuta en cada renderizado y descarta todo excepto el primero — que es costoso y puede lanzar durante SSR.
24. Solo el React State Es Transicionable: startTransition solo aplaza setters de React state — refs, almacenes externos y escrituras DOM síncronas no se ven afectadas; también recuerda que React 18 requiere una callback síncrona mientras React 19 permite callbacks async nativamente.
25. Dale a use() una Promise Estable: use(promise) trata un objeto promise fresco como una nueva solicitud pendiente, así que crear una promise inline en el renderizado causa suspensión infinita; la promise debe venir de props, un padre, un caché o un ref estable — y siempre sentarse bajo una Suspense más límite de error.