Lifting State Up in React: Share Data Across Sibling Components

Master lifting state up to share data between sibling components. Learn when to use props, recognize prop drilling problems, and apply real-world patterns with complete TypeScript examples.

When building React applications, you'll frequently encounter a common challenge: two sibling components need to share data, but neither should directly manage that data. This is where lifting state up becomes essential. It's one of the fundamental patterns every React developer must understand, and mastering it will make your component architecture significantly clearer and more maintainable.

Let me walk you through a practical scenario that most developers face, then show you exactly how to solve it.

# Table of Contents

The Problem: Why Components Can't Talk Directly
Understanding Component Trees
The Solution: Lifting State Up
Real-World Example: Product Filter
When to Lift State vs Using Context
Common Pitfalls and How to Avoid Them
FAQ

# The Problem: Why Components Can't Talk Directly {#the-problem}

Consider a scenario: You're building a product listing page with a search feature. You have two distinct components:

SearchBar — manages the search input and captures user typing
ProductList — displays filtered products based on the search term

The challenge is this: the search input lives in SearchBar, but ProductList needs that search term to filter its displayed products. How can ProductList know what the user typed in SearchBar?

Here's what beginners often try (and why it fails):

# The Broken Approach: Attempting Direct Communication

      
typescript

// ❌ This doesn't work - components can't communicate directly
function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');
  
  return (
    <input
      type="text"
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      placeholder="Search products..."
    />
  );
}

function ProductList() {
  // ❌ searchTerm is not accessible here - it's local to SearchBar
  return (
    <div>
      {products.filter(p => p.name.includes(searchTerm)).map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
}

function App() {
  return (
    <>
      <SearchBar />
      <ProductList />
    </>
  );
}

The problem is clear: searchTerm doesn't exist in ProductList because it's created and managed inside SearchBar. In React, data flows down through props, not sideways between siblings. Sibling components cannot directly access each other's state.

# Understanding Component Trees {#component-trees}

To understand why lifting state up works, you need to visualize React's component hierarchy as a tree structure:

      
typescript

App (parent)
       /   \
    SearchBar  ProductList (siblings)

SearchBar and ProductList are siblings — they share a common parent (App). In React's unidirectional data flow, communication between siblings must go through their shared parent. The parent can:

Hold the shared state
Pass data to SearchBar via props
Pass data to ProductList via props
Provide functions to SearchBar that update the shared state

This is the essence of "lifting state up" — moving state from a child component to its closest common ancestor.

# The Solution: Lifting State Up {#the-solution}

The solution is straightforward: move the state management from SearchBar into App (the parent component). Now App controls the search term and passes it to both components.

# TypeScript Implementation

      
typescript

import { ReactNode, useState } from 'react';

interface SearchBarProps {
  searchTerm: string;
  onSearchChange: (term: string) => void;
}

function SearchBar({ searchTerm, onSearchChange }: SearchBarProps) {
  return (
    <input
      type="text"
      value={searchTerm}
      onChange={(e) => onSearchChange(e.target.value)}
      placeholder="Search products..."
      aria-label="Search for products"
    />
  );
}

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
}

interface ProductListProps {
  products: Product[];
  searchTerm: string;
}

function ProductList({ products, searchTerm }: ProductListProps) {
  const filteredProducts = products.filter(product =>
    product.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div role="region" aria-label="Product list">
      {filteredProducts.length === 0 ? (
        <p>No products found matching "{searchTerm}"</p>
      ) : (
        <ul>
          {filteredProducts.map(product => (
            <li key={product.id}>
              <h3>{product.name}</h3>
              <p>{product.description}</p>
              <p>${product.price}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function App() {
  const [searchTerm, setSearchTerm] = useState('');

  // Sample product data
  const products: Product[] = [
    { id: 1, name: 'Wireless Headphones', price: 79.99, description: 'High-quality sound' },
    { id: 2, name: 'USB-C Cable', price: 9.99, description: 'Fast charging' },
    { id: 3, name: 'Phone Stand', price: 14.99, description: 'Adjustable angle' },
  ];

  return (
    <div className="app">
      <h1>Product Store</h1>
      <SearchBar 
        searchTerm={searchTerm} 
        onSearchChange={setSearchTerm}
      />
      <ProductList 
        products={products} 
        searchTerm={searchTerm}
      />
    </div>
  );
}

export default App;

# JavaScript Implementation

      
javascript

import { useState } from 'react';

function SearchBar({ searchTerm, onSearchChange }) {
  return (
    <input
      type="text"
      value={searchTerm}
      onChange={(e) => onSearchChange(e.target.value)}
      placeholder="Search products..."
      aria-label="Search for products"
    />
  );
}

function ProductList({ products, searchTerm }) {
  const filteredProducts = products.filter(product =>
    product.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div role="region" aria-label="Product list">
      {filteredProducts.length === 0 ? (
        <p>No products found matching "{searchTerm}"</p>
      ) : (
        <ul>
          {filteredProducts.map(product => (
            <li key={product.id}>
              <h3>{product.name}</h3>
              <p>{product.description}</p>
              <p>${product.price}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function App() {
  const [searchTerm, setSearchTerm] = useState('');

  const products = [
    { id: 1, name: 'Wireless Headphones', price: 79.99, description: 'High-quality sound' },
    { id: 2, name: 'USB-C Cable', price: 9.99, description: 'Fast charging' },
    { id: 3, name: 'Phone Stand', price: 14.99, description: 'Adjustable angle' },
  ];

  return (
    <div className="app">
      <h1>Product Store</h1>
      <SearchBar 
        searchTerm={searchTerm} 
        onSearchChange={setSearchTerm}
      />
      <ProductList 
        products={products} 
        searchTerm={searchTerm}
      />
    </div>
  );
}

export default App;

Let's look at a more complex scenario that mirrors real production applications. Imagine you need multiple filters working together:

# TypeScript Version

      
typescript

import { useState, ReactNode } from 'react';

interface Product {
  id: number;
  name: string;
  category: string;
  price: number;
  inStock: boolean;
}

interface FilterBarProps {
  category: string;
  onCategoryChange: (category: string) => void;
  minPrice: number;
  onMinPriceChange: (price: number) => void;
  onlyInStock: boolean;
  onOnlyInStockChange: (value: boolean) => void;
}

function FilterBar({ 
  category, 
  onCategoryChange,
  minPrice,
  onMinPriceChange,
  onlyInStock,
  onOnlyInStockChange
}: FilterBarProps) {
  return (
    <aside className="filter-bar">
      <h2>Filters</h2>
      
      <fieldset>
        <legend>Category</legend>
        <select value={category} onChange={(e) => onCategoryChange(e.target.value)}>
          <option value="">All Categories</option>
          <option value="electronics">Electronics</option>
          <option value="accessories">Accessories</option>
          <option value="software">Software</option>
        </select>
      </fieldset>

      <fieldset>
        <legend>Price Range</legend>
        <label>
          Minimum: ${minPrice}
          <input
            type="range"
            min="0"
            max="500"
            value={minPrice}
            onChange={(e) => onMinPriceChange(Number(e.target.value))}
          />
        </label>
      </fieldset>

      <fieldset>
        <legend>Availability</legend>
        <label>
          <input
            type="checkbox"
            checked={onlyInStock}
            onChange={(e) => onOnlyInStockChange(e.target.checked)}
          />
          Show only in-stock items
        </label>
      </fieldset>
    </aside>
  );
}

interface ProductGridProps {
  products: Product[];
  category: string;
  minPrice: number;
  onlyInStock: boolean;
}

function ProductGrid({ products, category, minPrice, onlyInStock }: ProductGridProps) {
  const filtered = products.filter(product => {
    const categoryMatch = !category || product.category === category;
    const priceMatch = product.price >= minPrice;
    const stockMatch = !onlyInStock || product.inStock;
    return categoryMatch && priceMatch && stockMatch;
  });

  return (
    <section className="product-grid">
      <h2>Products ({filtered.length})</h2>
      {filtered.length === 0 ? (
        <p>No products match your filters.</p>
      ) : (
        <div className="grid">
          {filtered.map(product => (
            <article key={product.id} className="product-card">
              <h3>{product.name}</h3>
              <p className="category">{product.category}</p>
              <p className="price">${product.price}</p>
              <p className="stock">
                {product.inStock ? '✓ In Stock' : 'Out of Stock'}
              </p>
            </article>
          ))}
        </div>
      )}
    </section>
  );
}

function ProductShowcase() {
  const [category, setCategory] = useState('');
  const [minPrice, setMinPrice] = useState(0);
  const [onlyInStock, setOnlyInStock] = useState(false);

  const products: Product[] = [
    { id: 1, name: 'MacBook Pro', category: 'electronics', price: 1299, inStock: true },
    { id: 2, name: 'USB-C Hub', category: 'accessories', price: 49, inStock: true },
    { id: 3, name: 'Code Editor', category: 'software', price: 199, inStock: false },
    { id: 4, name: 'Monitor Stand', category: 'accessories', price: 79, inStock: true },
    { id: 5, name: 'Mechanical Keyboard', category: 'electronics', price: 149, inStock: true },
  ];

  return (
    <div className="product-showcase">
      <h1>Product Showcase</h1>
      <div className="content">
        <FilterBar
          category={category}
          onCategoryChange={setCategory}
          minPrice={minPrice}
          onMinPriceChange={setMinPrice}
          onlyInStock={onlyInStock}
          onOnlyInStockChange={setOnlyInStock}
        />
        <ProductGrid
          products={products}
          category={category}
          minPrice={minPrice}
          onlyInStock={onlyInStock}
        />
      </div>
    </div>
  );
}

export default ProductShowcase;

# JavaScript Version

      
javascript

import { useState } from 'react';

function FilterBar({ 
  category, 
  onCategoryChange,
  minPrice,
  onMinPriceChange,
  onlyInStock,
  onOnlyInStockChange
}) {
  return (
    <aside className="filter-bar">
      <h2>Filters</h2>
      
      <fieldset>
        <legend>Category</legend>
        <select value={category} onChange={(e) => onCategoryChange(e.target.value)}>
          <option value="">All Categories</option>
          <option value="electronics">Electronics</option>
          <option value="accessories">Accessories</option>
          <option value="software">Software</option>
        </select>
      </fieldset>

      <fieldset>
        <legend>Price Range</legend>
        <label>
          Minimum: ${minPrice}
          <input
            type="range"
            min="0"
            max="500"
            value={minPrice}
            onChange={(e) => onMinPriceChange(Number(e.target.value))}
          />
        </label>
      </fieldset>

      <fieldset>
        <legend>Availability</legend>
        <label>
          <input
            type="checkbox"
            checked={onlyInStock}
            onChange={(e) => onOnlyInStockChange(e.target.checked)}
          />
          Show only in-stock items
        </label>
      </fieldset>
    </aside>
  );
}

function ProductGrid({ products, category, minPrice, onlyInStock }) {
  const filtered = products.filter(product => {
    const categoryMatch = !category || product.category === category;
    const priceMatch = product.price >= minPrice;
    const stockMatch = !onlyInStock || product.inStock;
    return categoryMatch && priceMatch && stockMatch;
  });

  return (
    <section className="product-grid">
      <h2>Products ({filtered.length})</h2>
      {filtered.length === 0 ? (
        <p>No products match your filters.</p>
      ) : (
        <div className="grid">
          {filtered.map(product => (
            <article key={product.id} className="product-card">
              <h3>{product.name}</h3>
              <p className="category">{product.category}</p>
              <p className="price">${product.price}</p>
              <p className="stock">
                {product.inStock ? '✓ In Stock' : 'Out of Stock'}
              </p>
            </article>
          ))}
        </div>
      )}
    </section>
  );
}

function ProductShowcase() {
  const [category, setCategory] = useState('');
  const [minPrice, setMinPrice] = useState(0);
  const [onlyInStock, setOnlyInStock] = useState(false);

  const products = [
    { id: 1, name: 'MacBook Pro', category: 'electronics', price: 1299, inStock: true },
    { id: 2, name: 'USB-C Hub', category: 'accessories', price: 49, inStock: true },
    { id: 3, name: 'Code Editor', category: 'software', price: 199, inStock: false },
    { id: 4, name: 'Monitor Stand', category: 'accessories', price: 79, inStock: true },
    { id: 5, name: 'Mechanical Keyboard', category: 'electronics', price: 149, inStock: true },
  ];

  return (
    <div className="product-showcase">
      <h1>Product Showcase</h1>
      <div className="content">
        <FilterBar
          category={category}
          onCategoryChange={setCategory}
          minPrice={minPrice}
          onMinPriceChange={setMinPrice}
          onlyInStock={onlyInStock}
          onOnlyInStockChange={setOnlyInStock}
        />
        <ProductGrid
          products={products}
          category={category}
          minPrice={minPrice}
          onlyInStock={onlyInStock}
        />
      </div>
    </div>
  );
}

export default ProductShowcase;

# When to Lift State vs Using Context {#lifting-vs-context}

You might be wondering: Should I always lift state up, or are there times to use something else? Great question. Here's the decision framework:

# Use Lifting State Up When:

Only 1-2 levels of component nesting separate the state holder from the consumers
Just 2-3 child components need to access the shared state
State changes are relatively infrequent (not constantly re-rendering)
Simple, atomic state (a single value or closely related values)

Example: A search bar at the top and results below — lift state to a parent container.

# Use React Context When:

Deep nesting (3+ levels) separates components that need shared state
Many components scattered throughout the tree need access
You want to avoid "prop drilling" (passing props through many intermediate components)
App-wide state like user authentication, theme preferences, or language settings

      
typescript

// Example: Prop drilling problem (why you'd use Context)
function Page() {
  return <Section userRole="admin" />;
}

function Section({ userRole }) {
  // userRole passed down even though this component doesn't use it
  return <Container userRole={userRole} />;
}

function Container({ userRole }) {
  // userRole passed down even though this component doesn't use it
  return <UserMenu userRole={userRole} />;
}

function UserMenu({ userRole }) {
  // Finally using it here - but it passed through 3 components!
  return <div>Welcome {userRole}</div>;
}

This pattern is called prop drilling, and it's a sign you should consider React Context API instead.

# Common Pitfalls and How to Avoid Them {#pitfalls}

# Pitfall 1: Lifting State Too High

Problem: Moving state further up the tree than necessary causes the entire parent to re-render.

      
typescript

// ❌ Lifting state too high
function App() {
  const [searchTerm, setSearchTerm] = useState('');
  const [theme, setTheme] = useState('light');
  const [notifications, setNotifications] = useState([]);
  // ... lots of other state
  
  return (
    <>
      <Header searchTerm={searchTerm} onSearchChange={setSearchTerm} />
      <Sidebar notifications={notifications} />
      <SearchResults searchTerm={searchTerm} />
    </>
  );
}

// ✅ Better: Keep state close to where it's used
function SearchSection() {
  const [searchTerm, setSearchTerm] = useState('');
  
  return (
    <>
      <SearchBar value={searchTerm} onChange={setSearchTerm} />
      <SearchResults searchTerm={searchTerm} />
    </>
  );
}

function App() {
  const [theme, setTheme] = useState('light');
  const [notifications, setNotifications] = useState([]);
  
  return (
    <>
      <Header />
      <Sidebar notifications={notifications} />
      <SearchSection />
    </>
  );
}

Best Practice: Keep state as close as possible to where it's used. Only lift state up to the closest common ancestor.

# Pitfall 2: Forgetting to Update State Correctly

Problem: Assuming that just passing a state value makes components automatically update.

      
typescript

// ❌ Wrong: Creating local state ignores passed prop
function ProductList({ filteredProducts }) {
  const [products, setProducts] = useState([]);
  // filteredProducts is ignored!
  return <>{products.map(p => <div key={p.id}>{p.name}</div>)}</>;
}

// ✅ Correct: Use the prop directly
function ProductList({ filteredProducts }) {
  return (
    <>
      {filteredProducts.map(p => (
        <div key={p.id}>{p.name}</div>
      ))}
    </>
  );
}

# Pitfall 3: Mutating State Directly

Problem: Directly modifying state instead of creating new values.

      
typescript

// ❌ Wrong: Mutating the state array
const [filters, setFilters] = useState({ category: '', price: 0 });

function updateCategory(newCategory) {
  filters.category = newCategory; // ❌ Mutation!
  setFilters(filters);
}

// ✅ Correct: Create a new object
function updateCategory(newCategory) {
  setFilters({
    ...filters,
    category: newCategory
  });
}

# Practical Guidelines

# When State Changes Are Frequent

If you expect the state to update frequently (like search input or form fields), consider using useReducer for better organization:

      
typescript

interface FilterState {
  searchTerm: string;
  category: string;
  minPrice: number;
}

type FilterAction = 
  | { type: 'SET_SEARCH'; payload: string }
  | { type: 'SET_CATEGORY'; payload: string }
  | { type: 'SET_PRICE'; payload: number }
  | { type: 'RESET' };

function filterReducer(state: FilterState, action: FilterAction): FilterState {
  switch (action.type) {
    case 'SET_SEARCH':
      return { ...state, searchTerm: action.payload };
    case 'SET_CATEGORY':
      return { ...state, category: action.payload };
    case 'SET_PRICE':
      return { ...state, minPrice: action.payload };
    case 'RESET':
      return { searchTerm: '', category: '', minPrice: 0 };
    default:
      return state;
  }
}

function SearchPage() {
  const [filters, dispatch] = useReducer(filterReducer, {
    searchTerm: '',
    category: '',
    minPrice: 0
  });

  return (
    <>
      <FilterBar filters={filters} dispatch={dispatch} />
      <Results filters={filters} />
    </>
  );
}

# FAQ {#faq}

Q: Can I lift state from a deeply nested component all the way to the App component?

A: You can, but it's not always ideal. If the state is only used by components deep in the tree, lifting it all the way to App causes unnecessary re-renders of unrelated components. Use React Context API instead.

Q: What's the difference between "lifting state up" and "prop drilling"?

A: Lifting state up is the technique itself — moving state to a common ancestor. Prop drilling is the problem that occurs when you lift state too high and have to pass it through many intermediate components that don't need it.

Q: If I have state in a parent, do all child components automatically re-render when it changes?

A: Yes, when parent state changes, all children re-render by default. This is why keeping state as close as possible to its usage is important. You can optimize with React.memo() for components that don't need to re-render.

Q: How do I know when I've lifted state too high?

A: You've likely lifted state too high if you see prop drilling — passing the same prop through 3+ intermediate components. Also, if only a small part of your component tree uses the state but the entire parent is re-rendering, you might want to restructure or use Context.

Q: Can I lift state in class components the same way?

A: Yes, the pattern is identical. Instead of useState, class components manage state in the constructor and update with this.setState(). The principle of moving state to a common ancestor remains the same.

Share your experience: Have you encountered a situation where lifting state up solved a tricky component communication problem? Let's discuss in the comments below!

Next Steps: Once you're comfortable with lifting state up, explore React Context API for managing state across many nested components.

Table of Contents

# Lifting State Up in React: Share Data Across Sibling Components