React & Next.js
Rendering, state, effects, hydration and routing problems with scoped fixes.
70 troubleshooting guides · Page 1 / 3
Why does a React subscription connect twice in development?
When StrictMode exercises an Effect, setup can be followed by cleanup and setup again.
Why does logging state immediately after setState show the old value?
A handler reads the state snapshot from the render that created it.
Why do three React increment calls add only one?
Three setCount(count + 1) calls within one handler use the same snapshot.
Why does changing a nested React object fail to refresh the view?
Mutation preserves references React may use to skip work.
How do I sort React state without corrupting its previous order?
Array.sort changes its receiver.
Why does deleting a React list row move another row’s input value?
An index key identifies a position, so deleting a row can associate an existing input with a different record.
How do I fix an uncontrolled-to-controlled React input warning?
A text input switches mode if value starts undefined and later becomes a string.
How do I stop an older React search request from replacing newer results?
Responses can arrive out of order.
Why does an options object make my React Effect reconnect on every render?
An object created in the component body has a new identity each render.
Why does my React interval keep using the initial counter?
An interval created by an empty-dependency Effect captures that render’s count.
Why does filtering React props in an Effect show a stale frame?
Derived data stored in separate state needs an extra render to catch up.
Why does useState ignore a new initial prop after an item changes?
The initializer supplies state on mounting, not on every prop change.
Why does updating a React ref not update the counter on screen?
A ref is mutable storage that does not request rendering.
How do I fix fewer Hooks rendered after an early return?
Ordinary Hooks must run in the same order on every render.
Why does React memo fail to stop a child from rendering?
A new object or callback prop can fail shallow equality even when its contents look unchanged.
Why does a React context consumer still receive the default value?
A consumer reads the nearest matching provider above it, not a provider returned later by that same component.
Why does a nested React component lose focus whenever the parent updates?
Defining a component function inside another component creates a new component type on each parent render.
Why does selected on a React option not control the selection?
Control the select element itself: <select value={city} onChange={e => setCity(e.target.value)}> with option values matching city.
Why does putting children inside a React textarea fail?
React uses value or defaultValue for textarea content.
Why does my React click handler run while rendering?
onClick={save()} invokes save immediately and passes its return value as the handler.
Why does clicking a React portal modal also trigger the parent card?
Portal events follow the React component tree even though the DOM node is elsewhere.
How do I avoid duplicate form IDs when a React field is rendered twice?
Hard-coded IDs break label associations when a reusable field appears twice.
How do I remove a React tooltip’s first-frame positioning jump?
Position measured in useEffect can be applied after the browser paints.
Why does a React reducer return undefined after an unknown action?
Every reducer path must return the next state or deliberately throw.
Ask your own question · Sign in to post questions and answers.