← All articles

React

14 articles

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.

Advanced

useState 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.

Intermediate

useContext 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.

Advanced

The 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.

Intermediate

Why 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.

Intermediate

Controlled vs Uncontrolled Inputs

The cryptic React warning about inputs changing from uncontrolled to controlled, explained by what actually owns the input's value.

Beginner

useRef: 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.

Beginner

useRef: 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.

Beginner

React Lifecycle, Explained

A simple breakdown of the three stages every React component goes through: mount, update, and unmount.

Beginner

The 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.

Advanced

useMemo and useCallback Are Not Free Performance Boosters

Why wrapping everything in useMemo or useCallback often costs more than it saves.

Advanced

Why 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.

Intermediate

Why 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.

Advanced

Why Does useEffect Exist?

Understanding the actual problem useEffect solves in React, not just its syntax.

Intermediate