1 min read
Variant Pattern: Simple, Predictable Styling APIs
Map variant names to style objects to keep component APIs clean and consistent.
Continue reading
All topics
Topic
design pattern
35 posts exploring design pattern.
-
-
1 min read
Partial Rendering: Show What You Have, Fallback the Rest
Don't block the UI when some data is missing. Render available pieces gracefully.
Continue reading -
2 min read
Optimistic UI: Make the App Feel Instant
Update the UI first, then confirm with the server using useOptimistic.
Continue reading -
1 min read
Empty States: Helpful Defaults When There's Nothing to Show
Replace blank screens with guidance that explains what to do next.
Continue reading -
2 min read
Skeletons and Placeholders: Show Structure While Content Loads
Improve perceived performance with skeleton UIs that match the eventual layout.
Continue reading -
2 min read
Guard Clause Rendering: Handle Edge Cases Up Front
Use early returns for loading and error states to keep your main render clean.
Continue reading -
2 min read
Error Boundary: Fail Safely with Friendly Fallbacks
Catch runtime errors in a subtree and render a helpful fallback instead of crashing the app.
Continue reading -
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 -
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 -
1 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 -
1 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 -
1 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 -
1 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 -
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 -
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
Children Pattern: Flexible Slots Without Extra Props
Pass UI through the children prop to keep parents flexible and children independent.
Continue reading -
1 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 -
1 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 -
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 -
2 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 -
3 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 -
2 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