2 min read
useDeferredValue — Keep Input Snappy During Slow Renders
Defer updating slow results so typing stays responsive.
Continue reading
All topics
Topic
design pattern
17 posts exploring design pattern.
-
-
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 -
2 min read
Dynamic Component Loading: Load Heavy UI on Demand
Use React.lazy and Suspense to split bundles and speed up initial loads.
Continue reading -
2 min read
Virtualization Pattern: Render Thousands of Rows Without Lag
Use a virtualized list to render only what's visible and keep the DOM lean.
Continue reading -
1 min read
Higher‑Order Components: The Legacy Pattern You'll Still Meet
Wrap a component to inject extra props. Useful to understand, even if hooks are preferred today.
Continue reading -
2 min read
Compound Components: Flexible APIs Built from Small Pieces
Create components that work together via context so consumers can compose them in any order.
Continue reading -
2 min read
Children Pattern: Flexible Slots Without Extra Props
Pass UI through the children prop to keep parents flexible and children independent.
Continue reading -
2 min read
Function Children Pattern: Pass a Function via Children
Share data from a parent and let consumers decide how to render it.
Continue reading -
2 min read
Render Props Pattern: Pass a Renderer via a Named Prop
Similar to function children, but explicit—pass a render function to customize output.
Continue reading -
3 min read
Presentational vs Container Components: Separate How It Looks from How It Works
Extract behavior into hooks, render with pure components, and keep your features composable.
Continue reading -
3 min read
Single Responsibility Principle: One Component, One Reason to Change
Split bloated components into focused pieces and extract logic with a custom hook.
Continue reading -
2 min read
Smart vs Dumb Components: A Practical Hierarchy for Features and UI
Keep feature logic in smart components and render with simple, reusable UI components.
Continue reading -
3 min read
Lifting State Up: Share Data Between Siblings Without Chaos
Learn how to move state to a common parent so sibling components can stay simple and in sync.
Continue reading -
2 min read
Colocating State: Keep State Close to Where It's Used
Reduce complexity by moving state into the component that actually needs it.
Continue reading -
4 min read
Custom Hooks: Extract and Reuse Stateful Logic in React
Stop duplicating logic across components. Learn how to design focused, reusable custom hooks with real-world examples.
Continue reading -
3 min read
State Machine Pattern: Replace Boolean Soup with a Single Status
Model UI states explicitly to prevent impossible combinations and clarify transitions.
Continue reading