> For the complete documentation index, see [llms.txt](https://xiaoyang-liu.gitbook.io/programming-notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://xiaoyang-liu.gitbook.io/programming-notes/web-development/react-internals/context.md).

# Context

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

## When to Use Context

Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.

```jsx
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // Use a Provider to pass the current theme to the tree below.
    // In this example, we're passing "dark" as the current value.
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

class Tool extends React.Component {
  // Assign a contextType to read the current theme context.
  // React will find the closest theme Provider above and use its value.
  // In this example, the current theme is "dark".
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}
```

## API

### React.createContext

```jsx
const MyContext = React.createContext(defaultValue);
```

Creates a Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching `Provider` above it in the tree.

The defaultValue argument is only used when a component does not have a matching `Provider` above it in the tree.

### Context.Provider

```jsx
<MyContext.Provider value={/* some value */}>
```

Every Context object comes with a `Provider` React component that allows consuming components to subscribe to context changes.

* The Provider component accepts a `value` prop to be passed to consuming components that are descendants of this `Provider`.
* `Provider` can be connected to many consumers.
* `Provider` can be nested to override values deeper within the tree.
* All consumers that are descendants of `Provider` will re-render whenever the `value` prop changes.

### Class.contextType

The `contextType` property on a class can be assigned a `Context` object created by `React.createContext()`. Using this property lets you consume the nearest current value of that `Context` type using `this.context`.

```jsx
class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    const value = this.context;
  }
}
```

### Context.Consumer

Using the `Context.Consumer` component lets you subscribe to a context within a function component. The function inside the component receives the current context value and returns a React node.

```jsx
<MyContext.Consumer>
  {value => <p>Context: {value}</p>}
</MyContext.Consumer>
```

### Context.displayName

The `displayName` string property will be used by React DevTools to determine what to display for the context.

```jsx
const MyContext = React.createContext(/* some value */);
MyContext.displayName = 'MyDisplayName';

<MyContext.Provider> // "MyDisplayName.Provider" in DevTools
<MyContext.Consumer> // "MyDisplayName.Consumer" in DevTools
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://xiaoyang-liu.gitbook.io/programming-notes/web-development/react-internals/context.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.