Hooks de ReactExplained

24 of 24 rows

Hook↕	Qué hace↕	Para qué usarlo↕
Estado
⤢useState	Guarda un único valor que provoca un re-render cuando cambia.	Estado local del componente: campos de formulario, interruptores, contadores.
⤢useReducer	Guarda estado gobernado por un reducer de acciones, como una pequeña store.	Estado con varios campos relacionados o transiciones complejas.
⤢useRef	Guarda un valor mutable que NO provoca un re-render.	Contenedores mutables, temporizadores y acceso directo al DOM mediante .current.
Efectos
⤢useEffect	Ejecuta un efecto secundario después del render, con limpieza opcional.	Obtener datos, suscripciones y sincronización con un sistema externo.
⤢Effect cleanup	La función que devuelve un efecto se ejecuta antes del siguiente efecto y otra vez al desmontar.	Cerrar suscripciones y temporizadores, o abortar una petición en curso.
⤢useLayoutEffect	Como useEffect, pero se dispara de forma síncrona tras la mutación del DOM.	Leer o escribir el layout antes de que el navegador pinte (toasts, tooltips).
⤢useEffect vs handlers	Los manejadores de eventos se ejecutan en respuesta a una acción del usuario; los efectos se ejecutan tras el render para sincronizar.	La lógica causada por el usuario va en un handler; la causada por el render, en un efecto.
⤢StrictMode	En desarrollo, monta los componentes dos veces para que los efectos se ejecuten, se limpien y vuelvan a ejecutarse.	Detectar suscripciones dobles y limpiezas que faltan antes de producción.
Rendimiento
⤢useMemo	Cachea un valor calculado hasta que cambian sus dependencias.	Evitar recálculos costosos entre renders; cambia a propósito un valor de las deps para invalidar la caché.
⤢useCallback	Cachea una referencia a una función hasta que cambian sus dependencias.	Callbacks estables que se pasan a hijos memoizados o se usan como dependencias.
⤢React.memo	Omite el re-render de un componente cuyas props no han cambiado.	Componentes hijos pesados; pasa una función de comparación como segundo argumento cuando la igualdad superficial no basta (un HOC, no un hook).
Contexto y handles externos
⤢useContext	Lee un valor de contexto sin prop drilling.	Tema, idioma o un usuario de autenticación compartidos en todo el árbol.
⤢useImperativeHandle	Personaliza la instancia que un padre ve a través de una ref.	Exponer una API reducida desde un hijo vía forwardRef.
Concurrencia y otros
⤢useTransition	Marca una actualización de estado como no urgente para que la interfaz siga respondiendo.	Mantener el input ágil mientras una lista pesada se vuelve a renderizar.
⤢useDeferredValue	Aplaza un valor para que las actualizaciones se puedan interrumpir.	Hacer debounce de renders costosos sin temporizadores.
⤢useId	Genera un id único y estable para atributos de accesibilidad.	Vincular label e input entre los renders del servidor y del cliente.
⤢use()	Lee una promesa o un contexto durante el render; el único hook que se puede llamar condicionalmente.	Desenvolver una promesa con Suspense, o leer contexto dentro de un return anticipado.
⤢useActionState	Guarda estado gobernado por una acción de formulario, con un flag de pending incluido.	Envíos de formulario que devuelven errores o estado actualizado para mostrar en línea.
⤢useOptimistic	Renderiza de inmediato un valor optimista y vuelve al estado real cuando la acción termina.	Mostrar un like o un mensaje enviado mientras su petición al servidor está en curso.
⤢useFormStatus	Lee el estado pending del <form> que lo rodea, sin props.	Un botón de envío que se desactiva mientras su formulario padre se envía.
⤢useSyncExternalStore	Se suscribe a una store fuera de React y lee una instantánea consistente.	APIs del navegador como el estado de conexión, o stores de terceros.
⤢useInsertionEffect	Se ejecuta antes de los efectos de layout, pensado para inyectar reglas CSS-in-JS.	Bibliotecas de estilos que deben insertar reglas antes de leer el layout.
⤢useDebugValue	Muestra una etiqueta personalizada del estado interno de un hook en React DevTools.	Etiquetar lo que contiene un hook personalizado durante la depuración.
⤢Custom hooks (use*)	Tu propio hook que compone los integrados para compartir lógica.	Comportamiento con estado reutilizable como useFetch o useMediaQuery.