createContext

Learn to create a context with createContext and a default value.

createContext

The createContext(defaultValue) call returns a context object. This object holds two parts: Provider (the value-giving side) and Consumer/reading side.

The default value is used only when there's no Provider above in the tree. So if no Provider wraps the component, it reads defaultValue; if wrapped, it reads the Provider's value.

The context object name must start with a capital letter; this is how React tells components from contexts. Like ThemeContext, UserContext.

Parts of the context object

Every context object has two important parts: Provider and the reading hook useContext. Provider is used like a component and takes a value prop.

You put the Provider somewhere high in the tree; all components inside can read the value. Multiple Providers can nest; the innermost wins.

On the reading side, the useContext(MyContext) call returns the value of the nearest Provider. We'll cover this hook in detail in the next lesson.

Exercise Create UserContext

Complete the skeleton. Create a context called UserContext; pass null as the default value to createContext. Export the result.

Show example solution

import { createContext } from "react";

const UserContext = createContext(null);

export default UserContext;

Test yourself

When is the default value used?
- When there is a Provider
- Never
- Always
- When there is no Provider
Show answer

When there is no Provider — The default is used only without a Provider.

Context naming

The context object name starts with a ____ letter.

Show answer

The context object name starts with a capital letter.

Match the context parts

Provider

Gives value
value

Data prop
useContext

Reading hook
defaultValue

No Provider

Next lesson: Provider and useContext

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies