useState

Basic Usage

Syntax

const [state, setState] = useState(initialValue);

• state: Current state value
• setState: Function to update state
• initialValue: Initial state value

Simple Example

import { useState } from "react";

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>
    </div>
  );
}

String State

function NameInput() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>Hello, {name || "Stranger"}!</p>
    </div>
  );
}

Boolean State

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

  return (
    <div>
      <button onClick={() => setIsOn(!isOn)}>
        {isOn ? "ON" : "OFF"}
      </button>
    </div>
  );
}

Object State

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

  const updateField = (field, value) => {
    setUser((prev) => ({ ...prev, [field]: value }));
  };

  return (
    <form>
      <input
        value={user.name}
        onChange={(e) => updateField("name", e.target.value)}
      />
      <input
        value={user.email}
        onChange={(e) => updateField("email", e.target.value)}
      />
    </form>
  );
}

Lazy Initialization

The Problem

// Bad: Expensive computation on every render
function ExpensiveComponent() {
  const [data, setData] = useState(computeExpensiveValue()); // Runs every render
}

The Solution

// Good: Lazy initialization - only runs once
function ExpensiveComponent() {
  const [data, setData] = useState(() => computeExpensiveValue());
}

When to Use

• Expensive computations
• Large data structures
• Reading from localStorage
• Initializing complex objects

Examples

// localStorage
function App() {
  const [theme, setTheme] = useState(() => {
    return localStorage.getItem("theme") || "light";
  });
}

// Complex calculation
function App() {
  const [fibonacci, setFibonacci] = useState(() => {
    return calculateFibonacci(100);
  });
}

// Large array
function App() {
  const [items, setItems] = useState(() => {
    return generateLargeArray(10000);
  });
}

Functional Updates

The Problem

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

  const incrementThree = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    // Only adds 1! count is still 0 in all three calls
  };
}

The Solution

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

  const incrementThree = () => {
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    // Adds 3! Each update uses the latest value
  };
}

When to Use

• New state depends on old state
• Multiple updates in same handler
• Avoiding stale closures

Examples

// Toggle
const toggle = () => setOn((prev) => !prev);

// Increment
const increment = () => setCount((prev) => prev + 1);

// Add to array
const addItem = (item) => setItems((prev) => [...prev, item]);

// Remove from array
const removeItem = (id) => setItems((prev) => prev.filter((item) => item.id !== id));

// Update object
const updateUser = (updates) => setUser((prev) => ({ ...prev, ...updates }));