📖 Notes LESSON 6 OF 18

useState — State Management

⏱️ 25 min

⚛️ React

Giving a Component Memory

useState is the first hook every React developer learns — it lets a component hold onto a value between renders and re-render automatically whenever that value changes.

Three State Shapes

Primitives, Objects, Arrays

🔢

Basic State

const [value, setValue] = useState(initialValue);

📦

Object State

Always spread to update: setUser(prev => ({...prev, [field]: val})).

📋

Array State

Add: [...prev, newItem]. Remove: prev.filter(x => x.id !== id).

🚫

Key Rule

Never mutate state directly — always create a new value and pass it to the setter.

All Three State Shapes

JSX

import { useState } from "react";

function Form() {
  // Primitive state
  const [name, setName] = useState("");
  const [step, setStep] = useState(1);

  // Object state (spread to update!)
  const [user, setUser] = useState({ name:"", email:"" });
  const update = (field, val) =>
    setUser(prev => ({ ...prev, [field]: val }));

  // Array state
  const [items, setItems] = useState([]);
  const add = item => setItems(prev => [...prev, item]);
  const remove = id => setItems(prev => prev.filter(x => x.id !== id));

  return <form>...</form>;
}

⚠️

Never do this

setUser(prev => { prev.name = val }) mutates the existing object instead of replacing it — React may not detect the change and skip a re-render. Always spread into a new object or array.

← Lesson 5: React Foundations Quiz Lesson 7: useEffect →