State: a component’s memory in code
const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>{count}</button>;Read the example from data and control flow to the resulting UI. Keep the component boundary small.
Back to week 1
Topic
State: a component’s memory
Definition
State is component-managed data that React preserves between renders and whose setter schedules a new render.
In simpler words
State remembers values such as a draft title or selected tab after a click or keystroke.
useState, setters, and local state ownership.
After this you can
- Add interactive memory to a component.
- Explain the trade-off to a teammate using a small example.
- Name at least one common bug pattern for this topic.
Understand State: a component’s memory
useState, setters, and local state ownership.
Start by identifying which value or browser behavior changes. Then describe the UI from that current input instead of editing the DOM as a separate source of truth.
Apply State: a component’s memory
Keep rendering as a calculation. Put user-triggered changes in event handlers, preserve UI memory in state, and reserve external synchronization for Effects or the server-state layer.
Name values by their UI meaning, test the loading and error path when data is remote, and avoid keeping two editable copies of the same value.
Ask before adding code: is this local UI memory, shared client state, or Nest-owned server state?
Where bugs hide
Definition
High-bug areas are places where a small API misuse looks correct but produces stale UI, duplicate work, or silent failures.
In simpler words
Each mistake below shows Wrong vs Right code — compare them side by side.
When something misbehaves, match the symptom to a pattern below before rewriting the feature.
Prefer fixing the ownership or update path over adding another Effect or sync step.
Mistake: let instead of useState
// Wrong
let count = 0;
<button onClick={() => { count++; }}> {count} </button>
// Right
const [count, setCount] = useState(0);
<button onClick={() => setCount(c => c + 1)}>{count}</button>Only state setters schedule a re-render.
Mistake: Conditional useState
// Wrong
if (ready) {
const [v, setV] = useState(0);
}
// Right
const [v, setV] = useState(0);
if (!ready) return null;Hooks must run in the same order every render.
Mistake: Copying Nest lists into useState forever
// Wrong
const [tickets, setTickets] = useState([]);
useEffect(() => { ticketsApi.list().then(setTickets); }, []);
// Right
const { data: tickets } = useQuery({
queryKey: ["tickets"],
queryFn: () => ticketsApi.list(),
});Server lists belong in Query so create/invalidate stays coherent.
Live playground
State: a component’s memory sandbox
Change one input at a time and predict the next render.
const [count, setCount] = useState(0); setCount(c => c + 1);
Keep in mind
- Keep the formal definition in mind; it explains which tool belongs where.
- Prefer one source of truth over synchronized copies of the same value.
- When behavior surprises you, trace: input → update → render → committed UI.
- Study the Wrong vs Right examples in “Where bugs hide” before you merge.
Test
Check your understanding
At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥ 80% (enforced by the API) to save progress.
Checking your session…
10 questions · concept 3 · syntax 3 · practical 2 · logic 2