Topic
36 posts exploring design pattern.
12 min read
A polished screen is easy to generate. Changing it exposes the decisions underneath. Why I built a pattern-driven frontend system with reusable components, composition rules, and context for coding agents.
Continue reading1 min read
Map variant names to style objects to keep component APIs clean and consistent.
Continue reading1 min read
Don't block the UI when some data is missing. Render available pieces gracefully.
Continue reading2 min read
Update the UI first, then confirm with the server using useOptimistic.
Continue reading1 min read
Replace blank screens with guidance that explains what to do next.
Continue reading2 min read
Improve perceived performance with skeleton UIs that match the eventual layout.
Continue reading2 min read
Use early returns for loading and error states to keep your main render clean.
Continue reading2 min read
Catch runtime errors in a subtree and render a helpful fallback instead of crashing the app.
Continue reading2 min read
Extract non-reactive logic from effects so you control when they re-run.
Continue reading2 min read
Pass a promise to use() and let Suspense handle loading and rendering.
Continue reading1 min read
Read context with the new use() hook, even inside conditions and loops.
Continue reading1 min read
Update state during render when inputs change; React will abandon and restart the render.
Continue reading2 min read
Keep event handlers up to date using a ref instead of effect dependencies.
Continue reading2 min read
When refs aren’t enough, selectively expose imperative methods from a child component.
Continue reading2 min read
Use use-context-selector to avoid re-renders by selecting slices of context.
Continue reading2 min read
Combine focused hooks to keep complex logic clean, testable, and reusable.
Continue reading1 min read
Use a ref to run logic only on the first render without effects.
Continue reading2 min read
Split effects so each handles a single job with its own dependencies.
Continue reading2 min read
Mark updates as non‑urgent so React can keep typing and clicks responsive.
Continue reading2 min read
Defer updating slow results so typing stays responsive.
Continue reading2 min read
Delay expensive work (like search) until input settles using a simple debounced hook.
Continue reading1 min read
Remove unnecessary state and effects by deriving values from existing state.
Continue reading2 min read
Use React.lazy and Suspense to split bundles and speed up initial loads.
Continue reading2 min read
Use a virtualized list to render only what's visible and keep the DOM lean.
Continue reading2 min read
Create components that work together via context so consumers can compose them in any order.
Continue reading1 min read
Wrap a component to inject extra props. Useful to understand, even if hooks are preferred today.
Continue reading2 min read
Pass UI through the children prop to keep parents flexible and children independent.
Continue reading1 min read
Share data from a parent and let consumers decide how to render it.
Continue reading1 min read
Similar to function children, but explicit—pass a render function to customize output.
Continue reading3 min read
Extract behavior into hooks, render with pure components, and keep your features composable.
Continue reading3 min read
Split bloated components into focused pieces and extract logic with a custom hook.
Continue reading2 min read
Keep feature logic in smart components and render with simple, reusable UI components.
Continue reading2 min read
Learn how to move state to a common parent so sibling components can stay simple and in sync.
Continue reading2 min read
Reduce complexity by moving state into the component that actually needs it.
Continue reading3 min read
Stop duplicating logic across components. Learn how to design focused, reusable custom hooks with real-world examples.
Continue reading2 min read
Model UI states explicitly to prevent impossible combinations and clarify transitions.
Continue reading