The React hooks used day to day, grouped by job: hold state, run effects, memoize work, share context, and reach outside the render. Each row pairs the hook with what it is for.
A hook is a function that lets a function component tap into React's features: state, lifecycle, context, and performance tuning. The two rules: call hooks at the top level (never inside loops or conditions), and call them from React functions only. The rest is choosing the right hook for the job.
Reference table · 24 entries
React HooksExplained
24 of 24 rows
State
Holds a single value that triggers a re-render when it changes.
Local component state: form fields, toggles, counters.
Holds state driven by an action reducer, like a small store.
State with several related fields or complex transitions.
Holds a mutable value that does NOT trigger a re-render.
Mutable containers, timers, and direct DOM access via .current.
Effects
Runs a side effect after render, with optional cleanup.
Fetching data, subscriptions, and syncing to an external system.
The function an effect returns runs before the next effect and again on unmount.
Tearing down subscriptions and timers, or aborting an in-flight fetch.
Like useEffect, but fires synchronously after DOM mutation.
Reading or writing layout before the browser paints (toasts, tooltips).
Event handlers run in response to a user action; effects run after render to sync.
User-caused logic belongs in a handler, render-caused logic in an effect.
In development, mounts components twice so effects run, clean up, and run again.
Catching double subscriptions and missing cleanup before production.
Performance
Caches a computed value until its dependencies change.
Avoiding expensive recalculations across renders; change a value in the deps on purpose to bust the cache.
Caches a function reference until its dependencies change.
Stable callbacks passed to memoized children or used as deps.
Skips re-render of a component whose props are unchanged.
Heavy child components; pass a comparison function as the second argument when shallow equality is not enough (a HOC, not a hook).
Context & external handles
Reads a context value without prop drilling.
Theme, locale, or an auth user shared across the tree.
Customizes the instance a parent sees through a ref.
Exposing a focused API from a child via forwardRef.
Concurrency & other
Marks a state update as non-urgent so the UI stays responsive.
Keeping input snappy while a heavy list re-renders.
Defers a value so updates can be interrupted.
Debouncing expensive renders without timers.
Generates a stable unique id for accessibility attributes.
Linking label and input across server and client renders.
Reads a promise or context during render; the only hook you can call conditionally.
Unwrapping a promise with Suspense, or reading context inside an early return.
Holds state driven by a form action, with a pending flag included.
Form submits that return errors or updated state to show inline.
Renders an optimistic value at once, then falls back to real state when the action settles.
Showing a like or a sent message while its server request is in flight.
Reads the pending state of the surrounding <form>, no props needed.
A submit button that disables itself while its parent form submits.
Subscribes to a store outside React and reads one consistent snapshot.
Browser APIs like online status, or third-party state stores.
Runs before layout effects, made for injecting CSS-in-JS rules.
Style libraries that must insert rules before layout is read.
Shows a custom label for a hook's internal state in React DevTools.
Labelling what a custom hook holds while debugging.
Your own hook that composes the built-ins to share logic.
Reusable stateful behaviour like useFetch or useMediaQuery.