When to Avoid Lifting State Up in React

Lifting state up is a fundamental React pattern used to share state between components by moving it to their common ancestor. However, applying this pattern indiscriminately can lead to bloated components, performance degradation, and maintainability issues. This article outlines the specific scenarios where you should avoid lifting state up, explaining why it can be harmful and what alternative state management strategies you should use instead.

1. When It Causes Excessive Re-renders (Performance Bottlenecks)

Every time state changes in a React component, that component and all of its child components re-render. If you lift state to a high-level ancestor component, any update to that state will force the entire component tree below it to re-render.

If the state is updated frequently (such as tracking mouse coordinates, form input fields, or rapid animations), lifting it up will cause severe performance lag. In these cases, keep the state local to the component that actually needs it, or use a ref if you do not need to trigger re-renders at all.

2. When It Leads to Severe “Prop Drilling”

Prop drilling occurs when you have to pass props through multiple layers of intermediate components that do not actually use the data, just to deliver it to a deeply nested child.

If you find yourself passing state and state-setter functions down through more than two or three levels of components, lifting state up is no longer the correct tool. Instead, you should use the React Context API or a dedicated state management library (like Zustand, Redux, or Recoil) to provide the state directly to the components that require it.

3. When It Violates Component Encapsulation

A key principle of component-based architecture is encapsulation—components should be self-contained and manage their own internal logic.

If a piece of state is only used to control the visual UI behavior of a single component (such as whether a dropdown is open, a button is hovered, or a modal is active), lifting that state to a parent component breaks encapsulation. It makes the parent component unnecessarily complex and prevents the child component from being easily reused in other parts of the application. Keep UI-specific state colocated within the component it controls.

4. When the State is Globally Shared

Lifting state up is designed for sharing state between a few closely related sibling components. If the state needs to be accessed by completely unrelated branches of your component tree—such as user authentication status, localized language settings, or app-wide theme preferences—lifting state up to the root component will make your codebase difficult to maintain.

For global state, bypass lifting state up entirely and opt for Context or global store solutions.