← React Beginner Questions - Set 1 Q9

What is state in React?

React Beginner Questions - Set 1

State is data that survives re-renders and triggers them. The functional updater in this example is the detail most people miss.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import { useState } from 'react';

export default function Cart() {
  const [items, setItems] = useState([]);

  function addItem(name) {
    // Arrow form receives the previous state — safe under rapid clicks
    setItems(prev => [...prev, name]);
  }

  return (
    <div>
      <button onClick={() => addItem('Lamp')}>Add lamp</button>
      <ul>{items.map((it, i) => <li key={i}>{it}</li>)}</ul>
      <p>Total items: {items.length}</p>
    </div>
  );
}

What to notice

• `setItems([...prev, name])` creates a new array; `prev.push(name)` would mutate and render nothing.
• State updates are batched and asynchronous — read the value from the updater, not from the variable you just set.
• State is local to the component instance; two `<Cart />` elements keep two independent lists.