2 min read
useEffectEvent : Read Latest Values in Effects Without Re-running Them
Extract non-reactive logic from effects so you control when they re-run.
Continue reading
All topics
Topic
hook patterns
14 posts exploring hook patterns.
-
-
2 min read
use() with Promises : Async Data with Suspense in React 19
Pass a promise to use() and let Suspense handle loading and rendering.
Continue reading -
2 min read
use() with Context : Conditional Context Reads in React 19
Read context with the new use() hook, even inside conditions and loops.
Continue reading -
2 min read
Abandon Render Pattern : Track Previous Values Without usePrevious
Update state during render when inputs change; React will abandon and restart the render.
Continue reading -
2 min read
Latest Ref Pattern : Access the Latest Value Without Re-running Effects
Keep event handlers up to date using a ref instead of effect dependencies.
Continue reading -
2 min read
useImperativeHandle : Expose Methods from Child to Parent
When refs aren’t enough, selectively expose imperative methods from a child component.
Continue reading -
2 min read
Context Selector : Subscribe to Just What You Need
Use use-context-selector to avoid re-renders by selecting slices of context.
Continue reading -
2 min read
Custom Hook Composition: Build Bigger Features from Small Hooks
Combine focused hooks to keep complex logic clean, testable, and reusable.
Continue reading -
2 min read
First Render Detection: Skip useEffect for One‑Time Render Logic
Use a ref to run logic only on the first render without effects.
Continue reading -
2 min read
Effect Separation: One Effect per Concern
Split effects so each handles a single job with its own dependencies.
Continue reading -
2 min read
useTransition: Keep the App Responsive During Expensive Updates
Mark updates as non‑urgent so React can keep typing and clicks responsive.
Continue reading -
2 min read
useDeferredValue: Keep Input Snappy During Slow Renders
Defer updating slow results so typing stays responsive.
Continue reading -
2 min read
Debounce: Wait for the User to Finish Typing
Delay expensive work (like search) until input settles using a simple debounced hook.
Continue reading -
2 min read
Deriving State: Calculate It, Don't Store It
Remove unnecessary state and effects by deriving values from existing state.
Continue reading