┌─────────────────────────────────────────────────────────────────┐
│                        Parent Component                         │
│                                                                 │
│                    ┌─────────────────────┐                     │
│                    │  state = { count }  │                     │
│                    └─────────────────────┘                     │
│                              │                                  │
│                    passes as prop                               │
│                              ▼                                  │
│              ┌───────────────────────────────┐                 │
│              │      Child Component          │                 │
│              │   props = { count: 5 }        │                 │
│              │   (read-only)                 │                 │
│              └───────────────────────────────┘                 │
└─────────────────────────────────────────────────────────────────┘

import { useState } from 'react';

const [stateValue, setStateFunction] = useState(initialValue);

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

function ToggleButton() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button 
      onClick={() => setIsOn(!isOn)}
      style={{ backgroundColor: isOn ? 'green' : 'gray' }}
    >
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

// ❌ WRONG - Direct mutation
count = count + 1;

// ✅ CORRECT - Use the setter function
setCount(count + 1);

function BadComponent() {
  // ❌ WRONG - Hook inside condition
  if (someCondition) {
    const [value, setValue] = useState(0);
  }
}

function GoodComponent() {
  // ✅ CORRECT - Hook at top level
  const [value, setValue] = useState(0);
  
  // Use conditions with the state value, not the hook
  if (someCondition) {
    // do something with value
  }
}

// ❌ Can cause bugs with multiple rapid updates
setCount(count + 1);
setCount(count + 1); // Both use the same stale 'count' value!

// ✅ CORRECT - Uses the latest state
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1); // Each gets the truly updated value

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

  const handleClick = () => {
    // All three will use functional updates for correct behavior
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
    // Result: count increments by 3
  };

  return <button onClick={handleClick}>Add 3 (count: {count})</button>;
}

// ❌ Expensive function runs on EVERY render
const [data, setData] = useState(expensiveComputation());

// ✅ Function only runs on initial render
const [data, setData] = useState(() => expensiveComputation());

function TodoApp() {
  // Load todos from localStorage only on first render
  const [todos, setTodos] = useState(() => {
    const saved = localStorage.getItem('todos');
    return saved ? JSON.parse(saved) : [];
  });

  // ...
}

function UserForm() {
  const [user, setUser] = useState({
    name: '',
    email: '',
    age: 0
  });

  const updateName = (newName) => {
    // ❌ WRONG - loses email and age
    setUser({ name: newName });
    
    // ✅ CORRECT - spread previous state
    setUser({ ...user, name: newName });
    
    // ✅ ALSO CORRECT - functional update
    setUser(prev => ({ ...prev, name: newName }));
  };

  return (
    <form>
      <input
        value={user.name}
        onChange={(e) => setUser({ ...user, name: e.target.value })}
        placeholder="Name"
      />
      <input
        value={user.email}
        onChange={(e) => setUser({ ...user, email: e.target.value })}
        placeholder="Email"
      />
    </form>
  );
}

const [user, setUser] = useState({
  name: 'Alice',
  address: {
    city: 'NYC',
    zip: '10001'
  }
});

// Updating nested property
setUser(prev => ({
  ...prev,
  address: {
    ...prev.address,
    city: 'LA'
  }
}));

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn React', done: false },
    { id: 2, text: 'Build project', done: false }
  ]);

  // ✅ Add item
  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text, done: false }]);
  };

  // ✅ Remove item
  const removeTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  // ✅ Update item
  const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, done: !todo.done } : todo
    ));
  };

  // ✅ Insert at specific position
  const insertAt = (index, newTodo) => {
    setTodos([
      ...todos.slice(0, index),
      newTodo,
      ...todos.slice(index)
    ]);
  };

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          <input
            type="checkbox"
            checked={todo.done}
            onChange={() => toggleTodo(todo.id)}
          />
          <span style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
            {todo.text}
          </span>
          <button onClick={() => removeTodo(todo.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

function UserProfile() {
  // Separate concerns into individual state pieces
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [isSubscribed, setIsSubscribed] = useState(false);
  const [notifications, setNotifications] = useState([]);
  
  // Each can be updated independently
}

// ✅ Multiple states - when values change independently
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');

// ✅ Object state - when values always change together
const [position, setPosition] = useState({ x: 0, y: 0 });

// ✅ Object state - for forms with many fields
const [formData, setFormData] = useState({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
});

function RenderDemo() {
  const [count, setCount] = useState(0);
  
  console.log('Component rendered!'); // Logs on every render

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}