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
frontend
24 posts exploring frontend.
-
-
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
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