State and events: Frontend Web Development (Expert)

What is state?

State is data that a component remembers between renders and that can change over time: the items in a cart, the text typed in a box, whether a menu is open. A normal variable is not enough. It starts again from its first value on every render, and changing it does not tell React to draw the screen again.

javascript

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

useState(0) returns the current value and a function to set a new one (React code, runs in a React project)

Careful: useState is a hook: a special React function whose name starts with "use". Call hooks only at the top level of a component or a custom hook. Never call them inside an if, a loop or a nested function, because React matches each hook by its order.

Handling events

You attach an event handler with a camelCase prop such as onClick, onChange or onSubmit. Pass the function itself: onClick={handleClick}. Do not call it: onClick={handleClick()} would run during rendering, not on the click. To pass an argument, wrap the call in an arrow function.

javascript

function LikeButton() {
  const [liked, setLiked] = useState(false);

  function handleClick() {
    setLiked(!liked);
  }

  return (
    <button onClick={handleClick} aria-pressed={liked}>
      {liked ? 'Liked' : 'Like'}
    </button>
  );
}

// With an argument:
<button onClick={() => removeItem(item.id)}>Remove</button>

onClick={handleClick} passes the function; React calls it on each click (React code, runs in a React project)

State is a snapshot

Think of it like this: State is like a photo of the scoreboard taken at the start of an over. During that over, everyone reads the same photo, even after a boundary is hit. The new score appears only in the next photo, which is the next render.

javascript

// count is 0
function handleClick() {
  setCount(count + 1); // asks for 0 + 1
  setCount(count + 1); // still asks for 0 + 1
  setCount(count + 1); // still 0 + 1  -> after the render, count is 1
}

function handleClickFixed() {
  setCount((c) => c + 1); // 0 -> 1
  setCount((c) => c + 1); // 1 -> 2
  setCount((c) => c + 1); // 2 -> 3  -> after the render, count is 3
}

The setter does not change count now. Pass an updater function when the next value depends on the previous one (React code, runs in a React project)

Never mutate state: make new copies

React checks whether state changed by comparing the old and new value with Object.is. If you push into the same array and set it again, React sees the same array and may skip the update. So always build a new array or object. Spread (...), map and filter all return new ones.

Task	Wrong (changes the old value)	Right (makes a new value)
Add an item	items.push(item)	setItems([...items, item])
Remove an item	items.splice(index, 1)	setItems(items.filter((i) => i.id !== id))
Change one item	items[0].done = true	setItems(items.map((i) => (i.id === id ? { ...i, done: !i.done } : i)))
Change an object field	user.name = 'Asha'	setUser({ ...user, name: 'Asha' })
Change a nested field	user.address.pin = '560001'	setUser({ ...user, address: { ...user.address, pin: '560001' } })

Lifting state up

Sometimes two components need the same data. For example, the product list adds to the cart and the header shows the cart count. Move the state up to their closest common parent, then pass the value and the functions that change it down as props. This is called lifting state up.

javascript

function Shop() {
  const [cart, setCart] = useState([]);

  function handleAdd(product) {
    setCart((current) => [...current, product]);
  }

  return (
    <>
      <Header cartCount={cart.length} />
      <ProductList onAdd={handleAdd} />
    </>
  );
}

Shop owns the cart; Header reads it and ProductList asks to change it (React code, runs in a React project)

useReducer for bigger state logic

When many different actions change the same state (add, remove, change quantity, clear), the update code spreads across many handlers. useReducer collects it in one pure function called a reducer. It takes the current state and an action object and returns the next state. Handlers just dispatch (send) actions.

javascript

import { useReducer } from 'react';

function cartReducer(cart, action) {
  switch (action.type) {
    case 'added':
      return [...cart, { ...action.item, qty: 1 }];
    case 'removed':
      return cart.filter((line) => line.id !== action.id);
    default:
      return cart;
  }
}

function Cart() {
  const [cart, dispatch] = useReducer(cartReducer, []);
  // in a handler:
  // dispatch({ type: 'added', item: rice });
  // dispatch({ type: 'removed', id: 'p1' });
}

The reducer holds all the update rules; components only dispatch actions (React code, runs in a React project)

Tip: A reducer is plain JavaScript with no React inside, so you can test it without a browser. That is exactly what the tasks below do. Reducers must be pure: no fetch, no timers, no changing the old state.

State and events

Explanation

What is state?

Handling events

State is a snapshot

Never mutate state: make new copies

Lifting state up

useReducer for bigger state logic

Watch the lesson

In real life: A kirana billing app

Practice (0/3 done)

Quick quiz

Read more (free)