What is Context?

Learn global state with the Context API.

What is Context?

In React Native Context lets you share data through the component tree without manually passing props. A parent provides a value; descendants read it directly. This solves prop drilling (passing the same prop at every layer).

For example theme, user session or locale are used across the whole app. Context keeps them in one source. Context is ideal for global data like theme and locale; use it carefully for frequently changing values due to performance concerns. It is set up in three steps: create, provide, consume.

Three steps

Context is set up in three steps. First create: you make a context object with createContext. Second provide: in a parent component you give the value with Context.Provider. Third consume: in a child component you read the value with useContext.

These three steps are the heart of Context. Every descendant inside the Provider can reach the value; the components in between do not need to pass it as a prop. With this structure any part of the app can reach the central value; when the theme changes, all descendants update automatically.

Exercise Create a context

Create a context named ThemeContext. Use createContext; the default value is "light". Then log it with console.log(ThemeContext).

Show example solution

import { createContext } from "react";

const ThemeContext = createContext("light");
console.log(ThemeContext);

Test yourself

What problem does Context solve?
```
const ThemeContext = createContext("light");
```
- Prop drilling
- Style conflicts
- Component naming
- Folder structure
Show answer

Prop drilling — Context solves prop drilling.

Import Context

import { ____ } from "react";

Show answer

import { createContext } from "react";

Match the step to its order

createContext

Create
Provider

Provide
useContext

Consume
value

Provided data

Next lesson: createContext

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies