Frontend Guide
Practical, honest explainers for real frontend developers — the parts of React, CSS, and JS that most tutorials skip.
React.memo Doesn't Do What You Think
Wrapping a component in memo and seeing zero performance difference doesn't mean memo is broken — it almost always means a prop reference changes every render.
CSSCentering in CSS: A Decision Guide, Not a Meme
How to center a div has a different correct answer depending on what you're actually centering. A practical decision tree instead of the running joke.
ReactuseState vs useReducer: Picking the Right Tool
useReducer isn't useState for big apps — it's the right call when state fields update together or the next state depends on structured logic, not scale.
ReactuseContext and the Re-render Trap
Every consumer of a context re-renders when any part of its value changes, even if they only read one field. Here's why, and how to split contexts to avoid it.
ReactThe useEffect Cleanup Function, Explained
Cleanup isn't just for unmounting — it runs before every re-run of the same effect, which is what actually prevents duplicate subscriptions and stacked timers.
ReactWhy Index Keys Break Your List
React uses key to track identity across renders, not position. Using the array index means those two get conflated, and reordering or deleting items scrambles state.
ReactControlled vs Uncontrolled Inputs
The cryptic React warning about inputs changing from uncontrolled to controlled, explained by what actually owns the input's value.
ReactuseRef: The Mutable Box React Doesn't Watch
useRef gives you a value that survives re-renders but never triggers one. Here's what that actually means and when to reach for it instead of state.
ReactuseRef: The Mutable Box React Doesn't Watch
How `useRef` gives you a mutable value that survives re-renders but doesn't trigger them — when to use it and common pitfalls.
ReactReact Lifecycle, Explained
A simple breakdown of the three stages every React component goes through: mount, update, and unmount.
ReactThe Complete React Render Cycle: Trigger, Render, Commit, and Paint
A precise breakdown of how React actually updates the screen — from what triggers a render, through reconciliation, to the browser's own paint step.
ReactuseMemo and useCallback Are Not Free Performance Boosters
Why wrapping everything in useMemo or useCallback often costs more than it saves.
ReactWhy React State Can Feel Stale
A stale closure is usually the reason React state looks one render behind — and when you actually need to guard against it.
ReactWhy You Can't Call a Hook Inside a Condition
The actual mechanical reason behind React's Rules of Hooks — not just that it's forbidden, but why.
AccessibilityWhy a <div onClick> Is Never a Real Button
The accessibility gap between a clickable div and a real button element, and why it matters.
CSSStop Using Margin for Flexbox Spacing — Use Gap
Why gap is the modern replacement for margin-based spacing in flex and grid layouts.
PerformanceYou Don't Need a Library to Lazy-Load Images
The native loading attribute handles lazy-loading images without any JavaScript.
JavaScriptWhy Your setTimeout Loop Logs the Wrong Number
A classic closure gotcha with var inside loops and setTimeout, and how let fixes it.
CareerYour Resume Gets You Screened, Your Portfolio Gets You Hired
Why frontend candidates should treat these as two different tools with two different jobs.
ReactWhy Does useEffect Exist?
Understanding the actual problem useEffect solves in React, not just its syntax.