Managing State with useState

import { useState } from 'react';

// Basic usage
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <button onClick={() => setCount(count - 1)}>
        Decrement
      </button>
      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  );
}

// Multiple state variables
function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [age, setAge] = useState(0);
  
  return (
    <form>
      <input 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
        placeholder="Name"
      />
      <input 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
        placeholder="Email"
      />
      <input 
        type="number"
        value={age} 
        onChange={(e) => setAge(Number(e.target.value))} 
        placeholder="Age"
      />
    </form>
  );
}

useState(0) initializes state with 0. The array destructuring gives us `count` (current value) and `setCount` (updater function). You can have multiple useState calls in one component, each managing its own piece of state.

// Direct initial value (calculated on every render - inefficient if expensive)
function Component1() {
  const [data, setData] = useState(expensiveCalculation());
  // ❌ expensiveCalculation() runs on every render!
}

// Function initializer (only runs once)
function Component2() {
  const [data, setData] = useState(() => expensiveCalculation());
  // ✅ expensiveCalculation() only runs on first render
}

// Example: Reading from localStorage
function Component3() {
  // ❌ Wrong - reads on every render
  const [value, setValue] = useState(
    localStorage.getItem('key') || 'default'
  );
  
  // ✅ Correct - only reads once
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem('key');
    return stored ? JSON.parse(stored) : 'default';
  });
}

// Example: Complex initial state
function Component4() {
  const [user, setUser] = useState(() => {
    // This function only runs once, even if component re-renders
    const defaultUser = {
      name: 'Guest',
      role: 'user',
      preferences: { theme: 'light', notifications: true }
    };
    return defaultUser;
  });
}

Use the function form of useState when initializing with values that are expensive to compute or when reading from localStorage/sessionStorage. The function only runs once on mount, not on every re-render.

function Counter() {
  const [count, setCount] = useState(0);
  
  // ❌ WRONG - Direct mutation
  const badIncrement = () => {
    count = count + 1;  // Don't do this! Won't trigger re-render
  };
  
  // ✅ CORRECT - Using setter
  const goodIncrement = () => {
    setCount(count + 1);
  };
  
  // ✅ BETTER - Functional update (when new state depends on old)
  const betterIncrement = () => {
    setCount(prevCount => prevCount + 1);
  };
  
  // Multiple updates in sequence
  const handleMultipleUpdates = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    // ❌ This will only increment once! (count is still 0 in all calls)
  };
  
  // ✅ Correct way - use functional updates
  const handleMultipleUpdatesCorrect = () => {
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
    // ✅ This increments three times!
  };
  
  // Updating objects
  const [user, setUser] = useState({ name: 'Alice', age: 25 });
  
  // ❌ WRONG - Mutating object directly
  const badUpdate = () => {
    user.age = 26;  // Don't do this!
    setUser(user);  // React won't detect change
  };
  
  // ✅ CORRECT - Creating new object
  const goodUpdate = () => {
    setUser({ ...user, age: 26 });  // Spread operator
  };
  
  // ✅ OR functional update
  const goodUpdate2 = () => {
    setUser(prev => ({ ...prev, age: 26 }));
  };
}

Never mutate state directly. Always use setter functions. For updates that depend on previous state, use functional updates (prev => newValue). When updating objects/arrays, create new objects using spread operator or other immutable patterns.

function Example() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Alice');
  
  console.log('Component rendered'); // This logs on every render
  
  // Setting state causes re-render
  const increment = () => {
    setCount(count + 1);
    console.log(count); // Still shows old value! State update is async
  };
  
  // Multiple state updates may be batched
  const handleClick = () => {
    setName('Bob');
    setCount(1);
    // React may batch these into one re-render
  };
  
  // React 18: Automatic batching (even in async code)
  const handleAsyncClick = async () => {
    await fetch('/api/data');
    setName('Charlie');
    setCount(2);
    // These are batched together!
  };
  
  return (
    <div>
      <p>{name}: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

State updates are asynchronous - you won't see the new value immediately after calling setState. React batches multiple state updates for performance. In React 18+, batching happens automatically even in async functions.

// Pattern 1: Toggle state
function Toggle() {
  const [isOn, setIsOn] = useState(false);
  
  const toggle = () => setIsOn(prev => !prev);
  // OR
  const toggle2 = () => setIsOn(!isOn);
  
  return <button onClick={toggle}>{isOn ? 'ON' : 'OFF'}</button>;
}

// Pattern 2: Form state
function Form() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    age: 0
  });
  
  const updateField = (field, value) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };
  
  return (
    <input 
      value={formData.name}
      onChange={(e) => updateField('name', e.target.value)}
    />
  );
}

// Pattern 3: Loading and error states
function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  const fetchData = async () => {
    setLoading(true);
    setError(null);
    try {
      const result = await fetch('/api/data');
      setData(await result.json());
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;
  return <div>{/* Render data */}</div>;
}

// Pattern 4: Derived state
function Cart() {
  const [items, setItems] = useState([]);
  
  // Derived values - no need for separate state
  const total = items.reduce((sum, item) => sum + item.price, 0);
  const itemCount = items.length;
  
  return (
    <div>
      <p>{itemCount} items</p>
      <p>Total: {total}</p>
    </div>
  );
}

Common patterns include toggles, form state management, loading/error states, and derived values. Don't store values you can calculate from other state - use derived values instead.

// ❌ BAD - Storing derived value in state
function UserProfile({ firstName, lastName }) {
  const [fullName, setFullName] = useState('');
  
  useEffect(() => {
    setFullName(`${firstName} ${lastName}`);
  }, [firstName, lastName]);
  
  return <h1>{fullName}</h1>;
}

// ✅ GOOD - Calculate directly
function UserProfile({ firstName, lastName }) {
  const fullName = `${firstName} ${lastName}`;
  return <h1>{fullName}</h1>;
}

// ❌ BAD - Unnecessary state
function Button() {
  const [clicked, setClicked] = useState(false);
  
  const handleClick = () => {
    setClicked(true);
    // Do something
  };
}

// ✅ GOOD - Just use local variable
function Button() {
  const handleClick = () => {
    const clicked = true;
    // Do something
  };
}

// ❌ BAD - Constant in state
function Component() {
  const [apiUrl, setApiUrl] = useState('https://api.example.com');
  // Never changes, shouldn't be state
}

// ✅ GOOD - Use constant
const API_URL = 'https://api.example.com';
function Component() {
  // Use API_URL directly
}

Only use state for values that change over time AND affect what's rendered. Avoid storing derived values, constants, or temporary variables in state.

// ❌ WRONG - Conditional hook call
function BadComponent({ shouldUseState }) {
  if (shouldUseState) {
    const [count, setCount] = useState(0);  // ERROR!
  }
  return <div>...</div>;
}

// ✅ CORRECT - Always call hooks at top level
function GoodComponent({ shouldUseState }) {
  const [count, setCount] = useState(0);
  
  // Use conditionally if needed, but hook is always called
  if (!shouldUseState) {
    return <div>Static content</div>;
  }
  
  return <div>Count: {count}</div>;
}

// ❌ WRONG - Hook in loop
function BadList() {
  const items = ['a', 'b', 'c'];
  return items.map(item => {
    const [value, setValue] = useState(item);  // ERROR!
    return <div>{value}</div>;
  });
}

// ✅ CORRECT - Extract to component
function ListItem({ item }) {
  const [value, setValue] = useState(item);
  return <div>{value}</div>;
}

function GoodList() {
  const items = ['a', 'b', 'c'];
  return items.map(item => <ListItem key={item} item={item} />);
}

Hooks must be called in the same order every render. This allows React to track which state belongs to which hook. Conditional calls break this requirement.