State

Learning objectives#

• Tell state apart from props and derived values
• Keep state minimal
• Lift state up to share it between siblings
• Follow one-way data flow

Explanation#

Props come from the parent and are read-only. State belongs to a component and changes over time (with useState or useReducer). Changing state re-renders the component and its children.

Keep only the minimum in state. Anything you can compute from props or other state — totals, filtered lists, full names — is derived: calculate it during render.

If two siblings need the same data, move (lift) the state up to their closest common parent and pass it down as props, together with functions to change it.

Each piece of state has one owner — a single source of truth. Children receive values and callbacks; they never hold copies that can drift out of sync.

Not everything is state: constants belong outside the component, and values that never affect rendering can live in a ref.

Syntax#

1function Parent() {
2  const [query, setQuery] = useState('');           // state lives here
3  return (
4    <>
5      <SearchBox query={query} onChange={setQuery} /> {/* writes */}
6      <Results query={query} />                       {/* reads */}
7    </>
8  );
9}

Code example: Lifting state up for a filterable list#

1import { useState } from 'react';
2

3const PRODUCTS = [
4  { id: 1, name: 'Pen', price: 20 },
5  { id: 2, name: 'Pencil', price: 10 },
6  { id: 3, name: 'Notebook', price: 60 },
7];
8

9function SearchBox({ query, onQueryChange }) {
10  return (
11    <input
12      value={query}
13      onChange={e => onQueryChange(e.target.value)}
14      placeholder="Search"
15      aria-label="Search products"
16    />
17  );
18}
19

20function ResultList({ items }) {
21  return <ul>{items.map(p => <li key={p.id}>{p.name} — ₹{p.price}</li>)}</ul>;
22}
23

24export default function FilterableList() {
25  const [query, setQuery] = useState('');                              // the only state
26

27  const visible = PRODUCTS.filter(p =>                                 // derived, not stored
28    p.name.toLowerCase().includes(query.toLowerCase()));
29  const total = visible.reduce((sum, p) => sum + p.price, 0);         // derived
30

31  return (
32    <>
33      <SearchBox query={query} onQueryChange={setQuery} />
34      <ResultList items={visible} />
35      <p>{visible.length} items, ₹{total} in total</p>
36    </>
37  );
38}

Initially all three products are listed with “3 items, ₹90 in total”. Typing “pen” shows Pen and Pencil with “2 items, ₹30 in total”. Both the list and the summary always agree because they come from the same query.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. query is the only state; it lives in the parent, FilterableList.
2. SearchBox displays query and reports changes through onQueryChange — it owns nothing.
3. visible and total are calculated during render, so they can never be out of date.
4. PRODUCTS never changes, so it is a constant outside the component.

Real-world use case#

Common mistakes#

Best practices#

• Minimal state, maximum derivation
• One owner per piece of state
• Lift state only as high as needed
• Pass setters or callbacks down, values down

Remember this#

Practice exercise#

1import { useState } from 'react';
2

3function TemperatureInput({ celsius, onChange }) {
4  return <input type="number" value={celsius} onChange={e => onChange(Number(e.target.value))} aria-label="Celsius" />;
5}
6

7function FahrenheitDisplay({ celsius }) {
8  return <p>{celsius}°C = {celsius * 9 / 5 + 32}°F</p>;
9}
10

11export default function Converter() {
12  const [celsius, setCelsius] = useState(25);
13  return (
14    <>
15      <TemperatureInput celsius={celsius} onChange={setCelsius} />
16      <FahrenheitDisplay celsius={celsius} />   {/* 25°C = 77°F */}
17    </>
18  );
19}

Mini quiz#

Want more? Practise all React MCQs · React interview questions

Related topics#

My notes#

Saved in this browser.