Lifting State Up

In React, when multiple components need to share the same changing data, the best practice is to “lift the state up” to their closest common parent component. This means instead of each component maintaining its own state, you move the state to a higher-level component and pass it down as props.

Example: Sharing State Between Components

Suppose you have two sibling components that need to know whether a user is logged in. Instead of both maintaining separate states, you lift the state to their parent and pass it down.

function Parent() {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);

  return (
    <div>
      <LoginButton isLoggedIn={isLoggedIn} onLogin={() => setIsLoggedIn(true)} />
      <WelcomeMessage isLoggedIn={isLoggedIn} />
    </div>
  );
}

function LoginButton({ isLoggedIn, onLogin }) {
  return (
    <button onClick={onLogin}>
      { isLoggedIn ? 'Logout' : 'Login' }
    </button>
  );
}

function WelcomeMessage({ isLoggedIn }) {
  return (
    <h2>
      { isLoggedIn ? 'Welcome back!' : 'Please log in.' }
    </h2>
  );
}
  

The Parent component holds the isLoggedIn state and passes it to the two child components via props. The child components don't manage state themselves, which keeps the app’s data consistent.

Benefits of Lifting State Up

• Keeps data synchronized across components
• Makes your app easier to debug
• Simplifies the flow of data and helps with maintainability