1. Introduction 👋

State is what makes React applications interactive. While props let components receive data from their parents, state lets a component remember information and update its own UI over time — in response to user input, network responses, or timers.

2. What is State? 🤔

State is data that a component owns and can change over time. When state changes, React automatically re-renders the component to reflect the new data on screen.

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

3. Why State? 💡

Without state, components could only render static output based on their props. State enables:

4. State vs Props ⚔️

5. Understanding useState 🪝

useState is the primary Hook used to add state to function components. It returns an array containing the current value and a setter function.

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

6. Creating State 🌱

import { useState } from 'react';

function LoginForm() {
  const [email, setEmail] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  return (
    <form>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
    </form>
  );
}

7. Reading State 👀

The current state value is simply the first element returned by useState. It behaves like a regular variable during render.

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

  return <h1>Welcome, {name}!</h1>;
}

8. Updating State ✏️

Calling the setter function schedules a state update and triggers a re-render of the component (and its children, where applicable).

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

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

9. Multiple State Variables 🔢

Components commonly use several independent useState calls to track distinct pieces of data separately.

function SignupForm() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [agreedToTerms, setAgreedToTerms] = useState(false);

  // Each variable updates independently
}

10. Functional State Updates 🔁

When new state depends on the previous state, pass a function to the setter instead of a direct value. This guarantees you're working with the most up-to-date state, especially important with rapid or batched updates.

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

  function incrementTwice() {
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    // Correctly results in +2
  }

  return <button onClick={incrementTwice}>Count: {count}</button>;
}

11. Initial State 🌟

The value passed to useState is used only once, during the component's first render. On subsequent renders, React ignores this argument and uses the current stored state instead.

function Timer() {
  const [seconds, setSeconds] = useState(0); // used only on first render
  // ...
}

12. Lazy Initialization 💤

If computing the initial state is expensive, pass a function to useState instead of a value. React calls this function only once, on the first render.

function TodoList() {
  const [todos, setTodos] = useState(() => {
    // Expensive operation runs only once
    return loadTodosFromLocalStorage();
  });
}

13. Updating Objects in State 🧱

Because state must be treated as immutable, updating an object requires creating a new object rather than mutating the existing one.

function ProfileForm() {
  const [user, setUser] = useState({ name: "Alice", age: 25 });

  function updateAge() {
    setUser({ ...user, age: user.age + 1 });
  }

  return <button onClick={updateAge}>Birthday 🎂</button>;
}

14. Updating Arrays in State 📚

Similarly, arrays in state must be updated immutably, using methods that return new arrays instead of mutating methods.

function TodoList() {
  const [todos, setTodos] = useState(["Learn React"]);

  function addTodo(newTodo) {
    setTodos([...todos, newTodo]); // ✅ new array
  }

  function removeTodo(index) {
    setTodos(todos.filter((_, i) => i !== index)); // ✅ new array
  }
}

15. Nested State 🪆

Updating deeply nested state requires copying every level of the structure that changes, since immutability applies at each nested layer.

function AddressForm() {
  const [user, setUser] = useState({
    name: "Alice",
    address: { city: "Chennai", zip: "600001" },
  });

  function updateCity(newCity) {
    setUser({
      ...user,
      address: { ...user.address, city: newCity },
    });
  }
}

16. Immutable State Updates 🔒

Immutability is a core rule of React state: never modify existing state objects or arrays directly. Always create a new copy with the desired changes.

17. State Batching 🎯

React batches multiple state updates that occur within the same event handler into a single re-render, improving performance by avoiding redundant renders.

function Form() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount(count + 1);
    setFlag(true);
    // Only ONE re-render happens, not two
  }
}

18. State Queue 📥

When multiple state updates are triggered before a re-render, React processes them as a queue. Functional updates ensure each update in the queue receives the correctly updated previous value.

function QueueExample() {
  const [number, setNumber] = useState(0);

  function handleClick() {
    setNumber((n) => n + 1); // queued: 0 -> 1
    setNumber((n) => n + 1); // queued: 1 -> 2
    setNumber((n) => n + 1); // queued: 2 -> 3
  }

  return <button onClick={handleClick}>{number}</button>; // results in 3
}

19. Asynchronous State Updates ⏱️

State updates are not applied immediately — React schedules them and applies the change before the next render, meaning the updated value isn't accessible right after calling the setter.

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

  function handleClick() {
    setCount(count + 1);
    console.log(count); // logs the OLD value, not the new one
  }
}

20. Derived State 🧮

Not every value needs its own useState. If a value can be calculated from existing state or props during render, it's usually better to derive it directly instead of storing it redundantly.

function Cart({ items }) {
  // ❌ Avoid: redundant state that can go out of sync
  // const [total, setTotal] = useState(0);

  // ✅ Prefer: derived directly during render
  const total = items.reduce((sum, item) => sum + item.price, 0);

  return <p>Total: ${total.toFixed(2)}</p>;
}

21. Lifting State Up ⬆️

When multiple components need to share the same state, move that state to their closest common parent, then pass it down via props.

function Parent() {
  const [selectedId, setSelectedId] = useState(null);

  return (
    <div>
      <ItemList selectedId={selectedId} onSelect={setSelectedId} />
      <ItemDetails selectedId={selectedId} />
    </div>
  );
}

22. Sharing State 🔗

Beyond lifting state to a shared parent, larger applications may share state across distant components using the Context API or dedicated state management libraries.

23. Preserving State 💾

React preserves a component's state across re-renders as long as it remains at the same position in the component tree, with the same type.

function App({ showCounter }) {
  return (
    <div>
      {showCounter && <Counter />}
      {/* Counter's state resets if unmounted and remounted */}
    </div>
  );
}

24. Resetting State 🔄

To intentionally reset a component's state (e.g., when switching between items), change its key prop — React treats a new key as an entirely new component instance.

function ProfileEditor({ userId }) {
  return <Form key={userId} />;
  // Changing userId forces Form to fully reset its internal state
}

25. State Management Patterns 🏛️

26. Common State Problems 🐛

27. State Best Practices 🌟

28. TypeScript with State 🔷

TS can infer state types automatically from the initial value, or you can specify them explicitly using generics for more complex cases.

// Inferred type: boolean
const [isVisible, setIsVisible] = useState(false);

// Explicit type for complex state
interface User {
  name: string;
  age: number;
}

const [user, setUser] = useState<User | null>(null);

29. Frequently Asked Questions ❓

30. Summary 📝

State gives React components memory, enabling dynamic, interactive user interfaces. Mastering useState — including immutable updates, functional updates, and patterns like lifting state up — is essential for building predictable and maintainable applications.