SESSION 042 — useState — BREAK && BUILD

CONCEPTS.UNLOCKED

🧠

useState

Adding memory to a component. const [value, setValue] = useState(initial). value holds the current data, setValue updates it and triggers a re-render.

🔄

State Updates → Re-renders

Calling setValue() tells React: "the data changed, re-render this component." React then calls your function again with the new value. The UI automatically reflects the new state.

🔒

Immutability

Never mutate state directly — always create new values. obj.x = 5 doesn't trigger a re-render. setObj({...obj, x: 5}) does. React compares old vs new to know what changed.

⬆

Lifting State Up

When two components need the same data, put state in their shared parent. Parent owns the state, passes it down as props. Single source of truth.

⚖

State vs Props

State: internal memory, owned by the component, can change. Props: external configuration, passed from parent, read-only. State flows down as props to children.

📐

UI = f(state)

The React formula: the UI is a pure function of the state. Same state → same UI, every time. Change the state → UI recomputes automatically. No manual DOM updates.

HANDS-ON.TASKS

Add State to SettingsPanel

▶

function SettingsPanel({ filters }) {
  const [brightness, setBrightness] = useState(0);

  return (
    <FilterSlider
      name="Brightness"
      value={brightness}
      onChange={(val) => setBrightness(val)}
    />
  );
}

useState(0) creates state with initial value 0. setBrightness(50) updates the value AND triggers a re-render. The slider displays the new value automatically.

Track the Active Tool

▶

function App() {
  const [activeTool, setActiveTool] = useState('select');

  return (
    <>
      <Toolbar
        activeTool={activeTool}
        onToolSelect={setActiveTool}
      />
      <CanvasArea activeTool={activeTool} />
    </>
  );
}

Both Toolbar and CanvasArea need activeTool. The state lives in App (their shared parent) and flows down as props. This is "lifting state up."

Lift State Up

▶

Both Toolbar and Canvas need activeTool → state lives in App. App passes the value down and the setter function down. Children call the setter, App re-renders, both children get the new value.

Understand Immutability

▶

// Wrong: mutating state
filterValues.brightness = 50;
// React doesn't know this changed!

// Right: creating new state
setFilterValues({
  ...filterValues,
  brightness: 50
});
// React re-renders!

React checks if the state reference changed (old === new). Mutation doesn't change the reference. The spread operator creates a new object → React detects the change → re-renders.

Close the Ticket

▶

git switch -c bugfix/PIXELCRAFT-030-add-state
git add src/components/ src/App.jsx
git commit -m "Add useState to toolbar and sliders (PIXELCRAFT-030)"
git push origin bugfix/PIXELCRAFT-030-add-state
# PR → Review → Merge → Close ticket ✅

CS.DEEP-DIVE

Reactive programming.

When state changes, the UI automatically reflects the new state. React's model: UI = f(state).

// Reactive systems are everywhere:

Spreadsheets    → change a cell →
                   formulas update
Database triggers → data changes →
                   actions fire
React           → state changes →
                   UI recomputes

// This eliminates an entire class of bugs:
// "the UI shows stale data."

"State Mastery"

[A] Add a counter in the header showing "5 filters active." It should update reactively as sliders are moved and toggles are switched.

[B] Build a theme toggle (dark/light) using useState. The theme state lives in App and is passed down to every component that needs styling changes.

[C] Intentionally mutate state directly (filterValues.brightness = 50) and observe: the UI doesn't update. Then fix with spread. Understand WHY at the reference level.

REF.MATERIAL

ARTICLE

State: A Component's Memory — React.dev

React Team

The official useState guide: why state exists, how it works, rendering behavior, and the rules of state updates.

useStateOFFICIALESSENTIAL

VIDEO

useState in 15 Minutes — Web Dev Simplified

Web Dev Simplified

Practical useState walkthrough: basic usage, updating objects, updating arrays, functional updates, and common pitfalls.

useStatePRACTICAL

ARTICLE

Sharing State Between Components — React.dev

React Team

Lifting state up: when to move state to a parent, how data flows, and the single source of truth principle.

LIFTING STATEOFFICIAL

ARTICLE

Updating Objects in State — React.dev

React Team

Why immutability matters in React: mutation vs creation, spread operator for objects, and nested object updates.

IMMUTABILITYOFFICIAL

VIDEO

React State Management — Fireship

Fireship

Overview of state management approaches: useState, useReducer, Context, and when each is appropriate.

STATEOVERVIEW

USE STATE