"State is not updating."
Three causes, one mental model.

import { useState, useEffect } from 'react';

// ─── BAD: expecting immediate update ─────────
function BadCounter() {
const [count, setCount] = useState(0);

function increment() {
setCount(count + 1);
console.log(count); // ❌ logs 0, not 1
// setCount schedules an update, doesn't change count
}

return {count};
}

// ─── GOOD 1: compute the new value locally ───
function GoodCounter1() {
const [count, setCount] = useState(0);

function increment() {
const next = count + 1;
setCount(next);
console.log(next); // ✅ logs 1
}

return {count};
}

// ─── GOOD 2: log in an effect ────────────────
function GoodCounter2() {
const [count, setCount] = useState(0);

useEffect(() => {
console.log('count is now:', count); // ✅ runs after render
}, [count]);

return (
 setCount(c => c + 1)}>
{count}

);
}

// ─── GOOD 3: use the value at the point you need it
function FormExample() {
const [name, setName] = useState('');
const [saved, setSaved] = useState('');

function save() {
// Use name directly — it's the current value from this render
setSaved(name);
fetch('/api/save', { method: 'POST', body: JSON.stringify({ name }) });
}

return (

 setName(e.target.value)} />
Save
Saved: {saved}

);
}

// ─── The mental model ─────────────────────────
//
// Every render creates a snapshot:
// Render 1: count = 0. Functions capture count = 0.
// setCount(1) schedules render 2.
// Render 2: count = 1. New functions capture count = 1.
//
// Inside one render, count is CONSTANT.
// setCount doesn't change it — it schedules the next render.

console.log(BadCounter, GoodCounter1, GoodCounter2, FormExample);

import { useState } from 'react';

// ─── BAD: two increments, only +1 total ──────
function BadDouble() {
const [count, setCount] = useState(0);

function incrementTwice() {
setCount(count + 1); // 0 + 1 = 1
setCount(count + 1); // 0 + 1 = 1 (same count!)
// Both compute 1. React batches → applies 1.
// Result: count goes from 0 to 1, not 0 to 2.
}

return {count};
}

// ─── GOOD: functional updates stack ──────────
function GoodDouble() {
const [count, setCount] = useState(0);

function incrementTwice() {
setCount(c => c + 1); // 0 → 1 (c receives 0)
setCount(c => c + 1); // 1 → 2 (c receives 1)
// Each call receives the previous pending value → stacks
}

return {count};
}

// ─── BAD: reading state after setState ───────
function BadConfirm() {
const [value, setValue] = useState('');

function submit() {
setValue('submitted');
// if (value === 'submitted') — never true on this click
alert(value); // ❌ still old value
}

return Submit;
}

// ─── GOOD: use the value directly ────────────
function GoodConfirm() {
const [value, setValue] = useState('');

function submit() {
const newValue = 'submitted';
setValue(newValue);
alert(newValue); // ✅ uses the computed value
}

return Submit;
}

// ─── Object state with functional update ─────
interface Form { name: string; email: string }

function FormExample() {
const [form, setForm] = useState
({ name: '', email: '' });

function clearAll() {
// ✅ Functional — always uses the latest state
setForm(f => ({ ...f, name: '', email: '' }));
}

function updateName(name: string) {
setForm(f => ({ ...f, name }));
}

return (

 updateName(e.target.value)} />
Clear

);
}

// ─── When to use functional setState ─────────
//
// ✅ Whenever the new value depends on the old value:
// setCount(c => c + 1)
// setItems(prev => [...prev, item])
// setForm(f => ({ ...f, name }))
//
// ✅ Whenever you set state inside a callback or effect:
// The closure might be stale — functional form always works.
//
// ❌ When the new value is independent:
// setName('Alice') — fine, no need for functional
// setLoading(true) — fine

console.log(BadDouble, GoodDouble, BadConfirm, GoodConfirm, FormExample);

import { useState } from 'react';

interface User { name: string; age: number }

// ─── BAD: mutation, no re-render ─────────────
function BadMutate() {
const [user, setUser] = useState({ name: 'Alice', age: 30 });

function updateName() {
user.name = 'Bob'; // mutate
setUser(user); // same reference → no re-render
}

return (

{user.name}
Change to Bob

);
}

// ─── GOOD: create new object ─────────────────
function GoodUpdate() {
const [user, setUser] = useState({ name: 'Alice', age: 30 });

function updateName() {
setUser({ ...user, name: 'Bob' }); // ✅ new object
}

return (

{user.name}
Change to Bob

);
}

// ─── Arrays: new reference, not mutation ─────
function ArrayUpdates() {
const [items, setItems] = useState<string[]>(['a', 'b']);

// ✅ Add
function add(item: string) {
setItems(prev => [...prev, item]);
}

// ✅ Remove
function remove(item: string) {
setItems(prev => prev.filter(i => i !== item));
}

// ✅ Update at index
function update(index: number, value: string) {
setItems(prev => prev.map((item, i) => i === index ? value : item));
}

// ❌ Never do these:
// items.push('c'); // mutates, no re-render
// items[index] = 'x'; // mutates, no re-render
// items.splice(0, 1); // mutates, no re-render

return (

 add('new')}>Add

{items.map((item, i) => (

{item}
 remove(item)}>×

))}


);
}

// ─── Nested objects: spread every level ──────
interface Profile {
name: string;
address: { city: string; zip: string };
}

function NestedUpdate() {
const [profile, setProfile] = useState({
name: 'Alice',
address: { city: 'Springfield', zip: '12345' }
});

function updateCity(city: string) {
// ✅ Spread at both levels
setProfile(p => ({
...p,
address: { ...p.address, city }
}));
}

return 
{profile.address.city}
;
}

// ─── The rule ────────────────────────────────
//
// State is IMMUTABLE. Every update creates a new reference.
// Object: { ...prev, changed: value }
// Array: [...prev, newItem], prev.filter(...), prev.map(...)
// Nested: { ...prev, nested: { ...prev.nested, changed: value } }
//
// Mutating prev.changed = value never triggers a re-render.
// React compares old reference === new reference. Same → no update.

console.log(BadMutate, GoodUpdate, ArrayUpdates, NestedUpdate);