createContext

Learn to create a context with createContext.

What is createContext?

createContext is a function that creates a new context object. When you write const ThemeContext = createContext(defaultValue) it returns a context; this object has a Provider property. The default value is used when no Provider is found.

To import it you write import { createContext } from "react". A context is usually defined in its own file; both providing and consuming components import from the same source. The context name starts with a capital letter (for example ThemeContext); this avoids confusion with component names. The object returned by createContext is stable; it stays the same on every render.

The default value

The first argument passed to createContext is the default value. When you write createContext("light"), if a component is not inside any Provider, useContext returns this value.

The default value is often left as null or undefined; this way a developer who forgets the Provider notices it at once. Sometimes a real value is given: for example a "light" theme or a "tr" locale. This value is used only when no Provider exists; if a Provider exists, its value takes priority.

Exercise Call createContext

Create a context named LocaleContext. With createContext give the default value "tr". Then log it with console.log(LocaleContext).

Show example solution

import { createContext } from "react";

const LocaleContext = createContext("tr");
console.log(LocaleContext);

Test yourself

Create the context

const ThemeContext = ____("light");

Show answer

const ThemeContext = createContext("light");

What does createContext return?
```
const ThemeContext = createContext("light");
```
- A component
- An object containing a Provider
- Bir dizi
- A number
Show answer

An object containing a Provider — createContext returns an object with a Provider.
Match each piece to its role

createContext

Creates the context
Provider

Provides the value
default

Used without Provider
useContext

Reads the value

Next lesson: Provider

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies