Topic

Sharing state between components

Definition

Lifting state up moves shared state to the closest common ancestor so children receive a single source of truth through props.

In simpler words

When siblings must agree, their parent keeps the value and passes it down.

Single source of truth, controlled children, and callbacks.

Open official example (opens in new tab)

After this you can

Synchronize sibling controls without duplicated state.
Explain the trade-off to a teammate using a small example.
Name at least one common bug pattern for this topic.

Understand Sharing state between components

Single source of truth, controlled children, and callbacks.

Start by identifying which value or browser behavior changes. Then describe the UI from that current input instead of editing the DOM as a separate source of truth.

Sharing state between components in code

function Accordion() {
  const [openId, setOpenId] = useState(null);
  return <Panel open={openId === "a"} onOpen={() => setOpenId("a")} />;
}

Read the example from data and control flow to the resulting UI. Keep the component boundary small.

Apply Sharing state between components

Keep rendering as a calculation. Put user-triggered changes in event handlers, preserve UI memory in state, and reserve external synchronization for Effects or the server-state layer.

Name values by their UI meaning, test the loading and error path when data is remote, and avoid keeping two editable copies of the same value.

Ask before adding code: is this local UI memory, shared client state, or Nest-owned server state?

Where bugs hide

Definition

High-bug areas are places where a small API misuse looks correct but produces stale UI, duplicate work, or silent failures.

In simpler words

Each mistake below shows Wrong vs Right code — compare them side by side.

When something misbehaves, match the symptom to a pattern below before rewriting the feature.

Prefer fixing the ownership or update path over adding another Effect or sync step.

Mistake: Duplicate sibling state + Effect sync

// Wrong
// ChildA and ChildB each hold openId and Effects copy them

// Right
// Parent holds openId and passes props/callbacks

Lift shared state instead of syncing copies.

Mistake: Lifted too high

// Wrong
// Every keystroke in a tiny input re-renders the whole app shell state

// Right
// Keep local draft state near the input; lift only what siblings share

Lift to the closest common owner.

Mistake: Forgot the callback prop

// Wrong
<Panel open={open} /> // cannot request close

// Right
<Panel open={open} onClose={() => setOpen(false)} />

Children notify parents via callbacks.

Live playground

Sharing state between components sandbox

Change one input at a time and predict the next render.

Lifted state — both panels read the same index.

Active panel: A

Keep in mind

Keep the formal definition in mind; it explains which tool belongs where.
Prefer one source of truth over synchronized copies of the same value.
When behavior surprises you, trace: input → update → render → committed UI.
Study the Wrong vs Right examples in “Where bugs hide” before you merge.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

11. Filter and List must share the same query. What is the fix?

Conceptintermediate

function Parent() {
  return (<><Filter /><List /></>);
}

Lift the query into Parent and pass it (and a setter) to bothDuplicate the query in each child and sync them with EffectsStore the query in a module-level variable both children importGive each child its own query and reconcile them before render

12. How does the child change the parent’s lifted state?

Syntaxadvanced

function Child({ onSelect }) {
  return <button onClick={() => onSelect(id)}>Pick</button>;
}

By assigning to the parent’s state variable directlyBy calling the parent’s useState setter it importedBy calling the onSelect callback prop the parent providedBy writing the value into a shared ref the parent reads

13. UserBadge is three levels deep and needs the current user. Cleanest option?

Practicalintermediate

<App>
  <Layout>
    <Sidebar>
      <UserBadge /> {/* needs current user */}

Prop-drill user through Layout and SidebarFetch the user again inside UserBadgeStore the user in a module-level letProvide user via context and read it with useContext in UserBadge

14. Why won’t this button update on screen?

Logicadvanced

let count = 0;
function Counter() {
  return <button onClick={() => count++}>{count}</button>;
}

Mutating a module variable doesn’t trigger a re-render; use useStatecount must be declared constonClick must be asyncReact re-renders only on prop changes

15. What pattern does this accordion use?

Conceptintermediate

function Accordion() {
  const [openId, setOpenId] = useState(null);
  return sections.map(s =>
    <Section key={s.id} isOpen={openId === s.id}
      onOpen={() => setOpenId(s.id)} />);
}

Lifted control — the parent owns openId and sections are controlledEach section owns its own open stateUncontrolled details elementsServer-driven accordion

Checking your session…