useState Hook Fundamentals and Patterns

import { useState } from 'react';

function Counter() {
  // Primitive state
  const [count, setCount] = useState(0);
  
  // Object state
  const [user, setUser] = useState({ name: 'John', age: 30 });
  
  // Array state
  const [items, setItems] = useState(['a', 'b', 'c']);
  
  // Boolean state
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// ❌ Problem: Both clicks only increment once total
function BadCounter() {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(count + 1); // Uses stale 'count'
    setCount(count + 1); // Uses same stale 'count'
  };
  
  return <button onClick={handleClick}>{count}</button>;
}

// ✅ Solution: Functional updates use latest state
function GoodCounter() {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(c => c + 1); // Uses latest state
    setCount(c => c + 1); // Uses result of previous update
  };
  
  return <button onClick={handleClick}>{count}</button>; // Increments by 2
}

// ❌ Bad: Reads localStorage on EVERY render (wasteful)
function BadComponent() {
  const [data, setData] = useState(
    JSON.parse(localStorage.getItem('userData') || '{}')
  );
  // This executes on every render, even though result is ignored after mount
}

// ✅ Good: Reads localStorage ONLY on initial mount
function GoodComponent() {
  const [data, setData] = useState(() => {
    const saved = localStorage.getItem('userData');
    return saved ? JSON.parse(saved) : {};
  });
  // Function executes once, subsequent renders skip it
}

// ✅ Good: Expensive calculation done only once
function DataProcessor({ rawData }) {
  const [processed, setProcessed] = useState(() => {
    console.log('Processing...'); // Logs only once
    return expensiveProcessing(rawData);
  });
}

import { useState } from 'react';
import { flushSync } from 'react-dom';

function Counter() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);
  
  console.log('Render'); // Track re-renders
  
  // React 18: Both updates batched → 1 render
  // React 17: Both updates batched → 1 render
  function handleClick() {
    setCount(c => c + 1);
    setFlag(f => !f);
    // Single re-render after both updates
  }
  
  // React 18: Both updates batched → 1 render
  // React 17: Each update causes render → 2 renders
  function handleAsync() {
    setTimeout(() => {
      setCount(c => c + 1);
      setFlag(f => !f);
      // React 18: Single re-render
    }, 1000);
  }
  
  // React 18: Both updates batched → 1 render
  // React 17: Each update causes render → 2 renders
  function handlePromise() {
    fetch('/api').then(() => {
      setCount(c => c + 1);
      setFlag(f => !f);
      // React 18: Single re-render
    });
  }
  
  // Opt-out: Force immediate synchronous updates
  function handleFlushSync() {
    flushSync(() => {
      setCount(c => c + 1); // Renders immediately
    });
    flushSync(() => {
      setFlag(f => !f); // Renders immediately (separate)
    });
    // Two separate re-renders
  }
}

function UserForm() {
  const [user, setUser] = useState({
    name: '',
    email: '',
    age: 0,
    address: { city: '', country: '' }
  });
  
  // ❌ Wrong: Loses all other properties
  const updateNameBad = (name) => {
    setUser({ name }); // user now only has 'name', lost email, age, address
  };
  
  // ✅ Correct: Spreads existing state, updates one field
  const updateName = (name) => {
    setUser(prev => ({ ...prev, name }));
  };
  
  // ✅ Multiple fields at once
  const updateMultiple = () => {
    setUser(prev => ({
      ...prev,
      name: 'John',
      age: 30
    }));
  };
  
  // ✅ Nested object update
  const updateCity = (city) => {
    setUser(prev => ({
      ...prev,
      address: { ...prev.address, city }
    }));
  };
  
  // ✅ Dynamic property name
  const updateField = (field, value) => {
    setUser(prev => ({ ...prev, [field]: value }));
  };
  
  return (
    <form>
      <input value={user.name} onChange={e => updateName(e.target.value)} />
      <input value={user.email} onChange={e => updateField('email', e.target.value)} />
    </form>
  );
}

const INITIAL_FORM = { name: '', email: '', age: 0 };

function Form() {
  const [form, setForm] = useState(INITIAL_FORM);
  
  // Method 1: Direct reset to constant
  const handleReset = () => {
    setForm(INITIAL_FORM);
  };
  
  // Method 2: Factory function for reset
  const createInitialState = () => ({
    name: '',
    email: '',
    age: 0,
    timestamp: Date.now() // Fresh timestamp on each reset
  });
  
  const [data, setData] = useState(createInitialState);
  
  const handleResetWithFactory = () => {
    setData(createInitialState());
  };
  
  return (
    <form>
      <input value={form.name} onChange={e => setForm(prev => ({...prev, name: e.target.value}))} />
      <button type="button" onClick={handleReset}>Reset</button>
    </form>
  );
}

// Method 3: Key-based reset (component remounts)
function UserProfile({ userId }) {
  return <ProfileForm key={userId} />; // New userId = fresh state
}

function ProfileForm() {
  const [name, setName] = useState(''); // Resets when key changes
  const [email, setEmail] = useState('');
  
  // State automatically resets when parent's key prop changes
}

// Pattern: Reset internal state when prop changes
function EditableItem({ item }) {
  const [localValue, setLocalValue] = useState(item.value);
  
  // Reset local state when item prop changes
  useEffect(() => {
    setLocalValue(item.value);
  }, [item.value]);
  
  return (
    <input
      value={localValue}
      onChange={e => setLocalValue(e.target.value)}
    />
  );
}

// Alternative: Use key to force remount
function ItemList({ items }) {
  return items.map(item => (
    <EditableItem key={item.id} item={item} />
  ));
}