Lifting State Up in React

Sometimes two components need the same data: a filter box and the list it filters, or a cart icon and the product page. State lives in one component, so the answer is to move it up to their closest common parent and pass it down as props. This is called lifting state up, and it's the standard way React components share data.

The problem

An FAQ where only one answer should be open at a time. If each panel keeps its own isOpen state, they can't know about each other:

import { useState } from "react";

function Panel({ title, children }) {
  const [isOpen, setIsOpen] = useState(false);     // each panel decides alone
  return (
    <section>
      <h3>{title}</h3>
      {isOpen ? <p>{children}</p> : <button onClick={() => setIsOpen(true)}>Show {title}</button>}
    </section>
  );
}

export default function App() {
  return (
    <>
      <Panel title="Is it free?">Yes, every tutorial is free.</Panel>
      <Panel title="Do I get a certificate?">Yes, after the final quiz.</Panel>
    </>
  );
}

Is it free?
[Show Is it free?]
Do I get a certificate?
[Show Do I get a certificate?]

› click “Show Is it free?”
Is it free?
Yes, every tutorial is free.
Do I get a certificate?
[Show Do I get a certificate?]

› click “Show Do I get a certificate?”
Is it free?
Yes, every tutorial is free.
Do I get a certificate?
Yes, after the final quiz.

Both end up open. To make them coordinate, the parent has to own the decision.

Lift the state to the parent

1. Remove the state from the children.
2. Add it to the common parent.
3. Pass the value and an event handler down as props.

import { useState } from "react";

function Panel({ title, isOpen, onShow, children }) {   // no state: fully controlled by props
  return (
    <section>
      <h3>{title}</h3>
      {isOpen ? <p>{children}</p> : <button onClick={onShow}>Show {title}</button>}
    </section>
  );
}

export default function App() {
  const [openIndex, setOpenIndex] = useState(0);   // the single source of truth
  return (
    <>
      <Panel title="Is it free?" isOpen={openIndex === 0} onShow={() => setOpenIndex(0)}>
        Yes, every tutorial is free.
      </Panel>
      <Panel title="Do I get a certificate?" isOpen={openIndex === 1} onShow={() => setOpenIndex(1)}>
        Yes, after the final quiz.
      </Panel>
    </>
  );
}

Is it free?
Yes, every tutorial is free.
Do I get a certificate?
[Show Do I get a certificate?]

› click “Show Do I get a certificate?”
Is it free?
[Show Is it free?]
Do I get a certificate?
Yes, after the final quiz.

› click “Show Is it free?”
Is it free?
Yes, every tutorial is free.
Do I get a certificate?
[Show Do I get a certificate?]

A search box and a list

import { useState } from "react";

const courses = ["React.js", "Next.js", "TypeScript", "JavaScript", "Node.js"];

function SearchBar({ query, onQueryChange }) {
  return <input placeholder="Filter courses" value={query} onChange={(e) => onQueryChange(e.target.value)} />;
}

function CourseList({ query }) {
  const matches = courses.filter((c) => c.toLowerCase().includes(query.toLowerCase()));
  return (
    <>
      <p>{matches.length} of {courses.length} courses</p>
      <ul>{matches.map((c) => <li key={c}>{c}</li>)}</ul>
    </>
  );
}

export default function App() {
  const [query, setQuery] = useState("");          // lifted: both children need it
  return (
    <>
      <SearchBar query={query} onQueryChange={setQuery} />
      <CourseList query={query} />
    </>
  );
}

[Filter courses…]
5 of 5 courses
• React.js
• Next.js
• TypeScript
• JavaScript
• Node.js

› type “js” into Filter courses
[js]
3 of 5 courses
• React.js
• Next.js
• Node.js

Controlled vs uncontrolled

The first Panel was uncontrolled: it owned its state and the parent couldn't influence it. The lifted Panel is controlled: its important values come from props. Controlled components are more flexible (the parent can coordinate them); uncontrolled ones are simpler to drop in. Many good components support both, like an <input> with either value or defaultValue.

Where should state live?

Keep state as low as possible, though. A text input's draft value that nobody else cares about should stay inside that input's component – lifting everything to the top makes the whole app re-render on every keystroke.

Practice

Summary