import { useState } from 'react';

function Counter() {
// Declare a state variable 'count', initialized to 0
// setCount is the ONLY way to update it
const [count, setCount] = useState(0);

return (
'2rem', textAlign: 'center' }}>
'3rem', margin: '0 0 1rem' }}>
{count}

 setCount(count - 1)}>
−1

 setCount(count + 1)} style={{ marginLeft: '0.5rem' }}>
+1


);
}

export default Counter;

// ❌ BROKEN — regular variable doesn't work
function BrokenCounter() {
let count = 0; // resets to 0 every render

function handleClick() {
count = count + 1; // changes the local variable
console.log(count); // logs 1, 2, 3...
}

return {count};
}

// Two problems:
// 1. React doesn't re-render when 'count' changes.
// The UI stays at 0 forever.
// 2. Even if it did re-render, 'let count = 0' resets
// to 0 on every render. The value is lost.
// useState fixes both: it persists the value across
// renders AND triggers a re-render when it changes.

// ─────────────────────────────────────────

// ✅ CORRECT — useState works
function WorkingCounter() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1); // schedules a re-render
}

return {count};
}

// 1. React re-renders when setCount is called.
// 2. The value persists across renders (React manages it).
// The UI updates to reflect the new count.

function Counter() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1);
console.log(count); // LOGS THE OLD VALUE!
// Why? Because setCount schedules a re-render.
// The current render still has the old count value.
// The new value is available NEXT render.
}

// Three clicks in a row — how much does count increase?
function handleTripleClick() {
setCount(count + 1); // uses this render's count
setCount(count + 1); // uses this render's count again
setCount(count + 1); // uses this render's count again
// Result: count increases by 1, not 3!
// All three calls use the SAME stale count value.
// The last call wins (batched).
}

return (

Count: {count}
+1
+3 (broken)

);
}

function Counter() {
const [count, setCount] = useState(0);

// ❌ WRONG — uses stale count on each call
function badTriple() {
setCount(count + 1); // count = 0, schedules 1
setCount(count + 1); // count is STILL 0, schedules 1
setCount(count + 1); // count is STILL 0, schedules 1
// Result: count increases by 1
}

// ✅ CORRECT — each call receives the pending value
function goodTriple() {
setCount(prev => prev + 1); // prev = 0, schedules 1
setCount(prev => prev + 1); // prev = 1, schedules 2
setCount(prev => prev + 1); // prev = 2, schedules 3
// Result: count increases by 3
}

return (

Count: {count}
+3 broken
+3 correct

);
}

// Rule of thumb:
// If new state = f(old state), use the updater form.
// If new state = a specific new value, direct is fine.
//
// setCount(5) ← fine (setting a specific value)
// setCount(count + 1) ← WRONG if called multiple times
// setCount(prev => prev+1) ← always correct

// ❌ BROKEN — mutating state
const [user, setUser] = useState({ name: 'Alice', age: 28 });

function badRename() {
user.name = 'Bob'; // mutates the object directly
// React doesn't detect the change — no re-render.
// The UI stays at "Alice" even though user.name is "Bob".
}

// ─────────────────────────────────────────

// ✅ CORRECT — spread to create new object
const [user, setUser] = useState({ name: 'Alice', age: 28 });

function goodRename() {
setUser({ ...user, name: 'Bob' });
// New object with name updated, age preserved.
// React sees a new reference → re-renders → UI updates.
}

// ─────────────────────────────────────────

// Nested objects — spread at each level
const [user2, setUser2] = useState({
name: 'Alice',
address: { city: 'NYC', zip: '10001' },
});

function moveCity() {
setUser2({
...user2,
address: { ...user2.address, city: 'LA' },
});
}

// ─────────────────────────────────────────

// Arrays — same pattern
const [items, setItems] = useState(['apple', 'banana']);

// Add
setItems([...items, 'cherry']);

// Remove
setItems(items.filter(item => item !== 'banana'));

// Replace one
setItems(items.map(item => item === 'apple' ? 'apricot' : item));

// Remove by id (objects)
setUsers(users.filter(u => u.id !== idToDelete));

// Both Display and Controls need the count.
// So App owns the state and passes it down.
function App() {
const [count, setCount] = useState(0);

return (


 setCount(prev => prev + 1)}
onReset={() => setCount(0)}
/>

);
}

// Display receives count as a prop — reads only
function Display({ count }) {
return 
{count}
;
}

// Controls receives callbacks — doesn't touch state directly
function Controls({ onIncrement, onReset }) {
return (

+1
Reset

);
}

// Why this pattern:
// - Single source of truth — count lives in one place (App)
// - Display and Controls stay simple — no internal state
// - The setter and callbacks flow down as props
// - When count changes, both children re-render with the new value