Next ❯

Lifting State Up

  • This lesson introduces lifting state up in React and explains how to manage shared state across components.

  • Topic Overview

    State management is about handling and sharing data across components in a React application.
    As applications grow, managing state properly becomes very important.

    Lifting State Up

    Sharing State Between Components

    Sometimes multiple components need the same data.

    Solution: Move (lift) the state to their closest common parent.

    Example:

    • Two child components need the same counter value

    • Counter state is moved to parent

    Parent-Child Communication

    Data Flow:

Parent → Child (via props)
Child → Parent (via callbacks)
  • Example:

const Parent = () => {
  const [count, setCount] = useState(0);
  return <Child count={count} setCount={setCount} />;
};
  • This keeps data synchronized.
Next ❯