How to Share Data in React with Props, Context, and Stores

There are three main ways to share data in React. Props send a value directly from a parent to a child, context makes a value available to a whole subtree, and stores keep data outside React that any component can read. Choosing the right one keeps your component tree readable.

Share data with props

Props are the default and usually the right choice. A parent passes a value down, and the child reads it:

App.jsx

function Profile({ name }) {
  return <p>{name}</p>;
}
 
function App() {
  return <Profile name="Maya" />;
}

The browser shows "Maya." The flow is explicit: App owns the value, and Profile receives it. Because every value is passed in the open, it is always clear where data comes from and which components use it.

Props become awkward when a value must travel through many layers that do not use it. If several siblings need the same changing value, first lift it to their shared parent.

Share data with context

Context solves the many-layers case. A parent provides a value, and any descendant reads it directly, no matter how deep it sits.

First create and export the context:

App.jsx

import { createContext } from "react";
 
export const ThemeContext = createContext("light");

A component reads the context value with the useContext hook. Import both the hook and the context, then call it inside the component:

App.jsx

import { useContext } from "react";
import { ThemeContext } from "./ThemeContext.js";
 
function Header() {
  const theme = useContext(ThemeContext);
  return <header className={theme}>My site</header>;
}

Reading alone is not enough, because React does not know where the value comes from. A parent must provide it by wrapping its children in the provider:

App.jsx

function App() {
  return (
    <ThemeContext value="dark">
      <Header />
    </ThemeContext>
  );
}

The header renders with the dark theme even though App never passed a theme prop down. Context is ideal for values many components need, like a theme or the signed-in user. The context guide covers defaults, providers, and updating values.

Share data with a store

Sometimes the data lives outside React, in a library such as Zustand or Redux Toolkit, or in a browser API. A store holds its own state and lets any component subscribe to changes.

React reads an external store through the useSyncExternalStore hook:

App.jsx

import { useSyncExternalStore } from "react";
 
function TodoCount({ store }) {
  const todos = useSyncExternalStore(store.subscribe, store.getSnapshot);
  return <p>{todos.length} todos</p>;
}

The component re-renders whenever the store changes. Libraries like Zustand wrap this pattern in a friendlier API, so you rarely call the hook yourself. A store is the right tool when data must live outside React or be shared across many unrelated features.

The three paths at a glance

This diagram shows how each approach reaches a component near the bottom of the tree:

Props walk down one level at a time, from parent to child to grandchild. Context jumps straight from the provider to any descendant that asks for it. A store sits outside the tree, and any component can subscribe to it.

How to choose

Start with props and escalate only when they stop fitting.

• A few levels, one direction: use props.
• Many distant components need one value: use context.
• Data lives outside React or spans many features: use a store.

The key rule is that each value has one owner. Props, context, and stores are three ways to move that owner's value to the components that read it.

What to learn next

Practice the most common pattern by lifting shared state to a parent, then build a provider with context. Both ideas appear in every real React app.