← React Beginner Questions - Set 5 Q46

What is the difference between stateful and stateless components?

React Beginner Questions - Set 5

The distinction is only about who holds the data. A stateless component is a pure function of its props.

Example

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

// Stateless: props in, JSX out, no memory
function Total({ items }) {
  return <p>{items.reduce((sum, i) => sum + i.price, 0)} EUR</p>;
}

// Stateful: owns data that changes over time
function Cart() {
  const [items, setItems] = useState([]);
  return (
    <>
      <button onClick={() => setItems(i => [...i, { price: 10 }])}>Add</button>
      <Total items={items} />
    </>
  );
}

What to notice

• Stateless components are trivial to test and to memoise — no hidden state to set up.
• The modern wording is 'container vs presentational', or simply where the hook lives.
• A stateless component can still be re-rendered often; stateless does not mean static.