createContext

constSomeContext =createContext(defaultValue)

• Reference
  • createContext(defaultValue)
  • SomeContext Provider
  • SomeContext.Consumer
• Usage
  • Creating context
  • Importing and exporting context from a file
• Troubleshooting
  • I can’t find a way to change the context value

Reference

createContext(defaultValue)

CallcreateContext outside of any components to create a context.

import{createContext}from'react';

constThemeContext =createContext('light');

See more examples below.

Parameters

• defaultValue: The value that you want the context to have when there is no matching context provider in the tree above the component that reads context. If you don’t have any meaningful default value, specifynull. The default value is meant as a “last resort” fallback. It is static and never changes over time.

Returns

createContext returns a context object.

The context object itself does not hold any information. It representswhich context other components read or provide. Typically, you will useSomeContext in components above to specify the context value, and calluseContext(SomeContext) in components below to read it. The context object has a few properties:

• SomeContext lets you provide the context value to components.
• SomeContext.Consumer is an alternative and rarely used way to read the context value.
• SomeContext.Provider is a legacy way to provide the context value before React 19.

SomeContext Provider

Wrap your components into a context provider to specify the value of this context for all components inside:

functionApp(){
const[theme,setTheme] =useState('light');
// ...
return(
<ThemeContextvalue={theme}>
<Page/>
</ThemeContext>
);
}

Props

• value: The value that you want to pass to all the components reading this context inside this provider, no matter how deep. The context value can be of any type. A component callinguseContext(SomeContext) inside of the provider receives thevalue of the innermost corresponding context provider above it.

SomeContext.Consumer

BeforeuseContext existed, there was an older way to read context:

functionButton(){
// 🟡 Legacy way (not recommended)
return(
<ThemeContext.Consumer>
{theme=>(
<buttonclassName={theme}/>
)}
</ThemeContext.Consumer>
);
}

Although this older way still works,newly written code should read context withuseContext() instead:

functionButton(){
// ✅ Recommended way
consttheme =useContext(ThemeContext);
return<buttonclassName={theme}/>;
}

Props

• children: A function. React will call the function you pass with the current context value determined by the same algorithm asuseContext() does, and render the result you return from this function. React will also re-run this function and update the UI whenever the context from the parent components changes.

Usage

Creating context

Context lets componentspass information deep down without explicitly passing props.

CallcreateContext outside any components to create one or more contexts.

import{createContext}from'react';

constThemeContext =createContext('light');
constAuthContext =createContext(null);

createContext returns acontext object. Components can read context by passing it touseContext():

functionButton(){
consttheme =useContext(ThemeContext);
// ...
}

functionProfile(){
constcurrentUser =useContext(AuthContext);
// ...
}

By default, the values they receive will be thedefault values you have specified when creating the contexts. However, by itself this isn’t useful because the default values never change.

Context is useful because you canprovide other, dynamic values from your components:

functionApp(){
const[theme,setTheme] =useState('dark');
const[currentUser,setCurrentUser] =useState({name:'Taylor'});

// ...

return(
<ThemeContextvalue={theme}>
<AuthContextvalue={currentUser}>
<Page/>
</AuthContext>
</ThemeContext>
);
}

Now thePage component and any components inside it, no matter how deep, will “see” the passed context values. If the passed context values change, React will re-render the components reading the context as well.

Read more about reading and providing context and see examples.

Importing and exporting context from a file

Often, components in different files will need access to the same context. This is why it’s common to declare contexts in a separate file. Then you can use theexport statement to make context available for other files:

// Contexts.js
import{createContext}from'react';

exportconstThemeContext =createContext('light');
exportconstAuthContext =createContext(null);

Components declared in other files can then use theimport statement to read or provide this context:

// Button.js
import{ThemeContext}from'./Contexts.js';

functionButton(){
consttheme =useContext(ThemeContext);
// ...
}

// App.js
import{ThemeContext,AuthContext}from'./Contexts.js';

functionApp(){
// ...
return(
<ThemeContextvalue={theme}>
<AuthContextvalue={currentUser}>
<Page/>
</AuthContext>
</ThemeContext>
);
}

This works similar toimporting and exporting components.

Troubleshooting

I can’t find a way to change the context value

Code like this specifies thedefault context value:

constThemeContext =createContext('light');

This value never changes. React only uses this value as a fallback if it can’t find a matching provider above.

To make context change over time,add state and wrap components in a context provider.