State in React

State is data the component owns and can change. A cart quantity, a modal open flag, the text in a search box. When state changes, React re-renders that component and its children. Props are not state — props arrived from the parent and this component must not assign to them.

In a function you write const [qty, setQty] = useState(1). qty is the current value for this paint. setQty(2) schedules the next paint. If you console.log(qty) on the line right after setQty(2), you still see 1. Updates are async to the next render. That surprise is a viva favourite.

You never do qty++ on the state variable and hope the screen moves. You also don’t mutate an object in place: user.name = 'Asha'; setUser(user) may not re-render because the reference is the same. Copy, then set: setUser({ ...user, name: 'Asha' }). Arrays: setItems([...items, next]), not items.push(next).

Let’s do a cart on the board. Qty starts at 1. Button + calls setQty(qty + 1). Screen: Qty 1 → Qty 2. Price child receives amount={49 * qty} as a prop. Qty is state in the parent. amount is a prop in Price. Two different words, one data flow.

Lift state up when two siblings need the same value. Search box and result list both care about the query — parent holds query, passes down. If only one card cares whether it is expanded, that flag can stay inside the card. ‘Always lift everything to App’ is how Context hell starts.

Trap: storing derived values in extra state (fullName when you already have first + last). Compute during render: const full = first + ' ' + last. Extra state goes stale. Also trap: putting server data only in a ref and wondering why the <p> is empty — refs don’t re-render.

State in React — on screen — Qty 1. Click → Qty 2. qty lives in Cart. Parent did not pass it.

Diagram

useState(1)
      │ click
      ▼
  setQty(2)
      │
      ▼
   UI re-renders

Exam tip

Owned vs props + setter + no mutate.

Example

// State
import { useState } from "react";

export default function Cart() {
  const [qty, setQty] = useState(1);
  return (
    <button onClick={() => setQty(qty + 1)}>
      Qty {qty}
    </button>
  );
}

State in React — on screen: Qty 1. Click → Qty 2. qty lives in Cart. Parent did not pass it.

Short notes

DefState is data this component owns. Changing it with a setter re-renders the UI.
RuleDon’t mutate. Copy then setState. qty++ or array.push will not reliably update the screen.
RemembersetQty(2) does not change qty on the next line. The new value appears on the next paint.
UseCart qty, modal open, search text, form fields — anything the user can change here.
TrapMutating objects/arrays. Lifting every flag to App. Storing derived strings as extra state.
ExuseState(1) + button → Qty 2. Child Price gets 49 * qty as a prop.
LearnLocal useState first. Lift when siblings share. Context/Redux only when many distant screens share.

State in React

State in React — on screen — Qty 1. Click → Qty 2. qty lives in Cart. Parent did not pass it.

Diagram

useState(1)
      │ click
      ▼
  setQty(2)
      │
      ▼
   UI re-renders

Exam tip

Owned vs props + setter + no mutate.

// State import { useState } from "react"; export default function Cart() { const [qty, setQty] = useState(1); return ( <button onClick={() => setQty(qty + 1)}> Qty {qty} </button> ); }

State in React

Example

Short notes

Questions

State in React

Example

Short notes

Questions