CodeBlanks Logo Icon CodeBlanks
Login Register

What is context?

Learn that context is a way to share data instead of prop drilling.

What is context?

Context is React's official way to pass data deep into the component tree. Normally you carry data through props hand to hand; this is known as prop drilling.

Prop drilling is fine in short trees, but once you go four or five levels deep, intermediate components must carry data they don't use. Context delivers data straight to where it's needed.

Typical uses: theme (dark/light), language (tr/en), logged-in user. This data is read in many places and passing it through props is tiring.

When to use context?

Context is not for every case. For two or three levels deep, props still work well and read clearly. Save context for data that feels global.

Good candidates: theme, locale, auth state, global notifications. Bad candidates: form data of one component or items for one list — those stay as local state.

Every change in context re-renders all consumers. So putting very frequently changing data in context can hurt performance; we'll see solutions in advanced level.

Practice ThemeTitle context

Complete the skeleton. Create a context object called ThemeContext; pass "light" as the default value to createContext. Export the result.

Starter code

App.jsx
// Define ThemeContext here
import { createContext } from "react";

Sample solution

App.jsx
import { createContext } from "react";

const ThemeContext = createContext("light");

export default ThemeContext;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What does prop drilling mean?

  • Lifting state up
  • Passing data through context
  • Passing data through props layer by layer Correct answer
  • Fetching data with useEffect

Explanation: Prop drilling is passing data through props layer by layer.

2 Context usage

Question 
Data like theme and language are ____ data, suitable for context.
Answer 
Data like theme and language are global data, suitable for context.

Explanation: Global data is ideal for context.

3 Match the context concepts

Term Meaning
Prop drilling Layer-by-layer props
Context Global data
Theme Typical use
useContext Reading hook

All lessons in Beginner

1 React intro

  1. What is React?
  2. Setup and Vite
  3. Your first component
  4. Summary - React intro

2 JSX basics

  1. What is JSX?
  2. Expressions and curly braces
  3. Attributes and className
  4. Summary - JSX basics

3 Components

  1. Component logic
  2. Component tree
  3. Naming rules
  4. Summary - Components

4 Profile card

  1. Project: Profile card
  2. Avatar component
  3. Info list
  4. Assemble the card

5 Props

  1. What are props?
  2. Reading props
  3. Children prop
  4. Default props
  5. Summary - Props

6 Conditional rendering

  1. What is conditional rendering?
  2. Ternary operator
  3. Logical AND (&&)
  4. Early return
  5. Summary - Conditional rendering

7 List rendering

  1. What is list rendering?
  2. The key attribute
  3. Array to components
  4. Filtering and sorting
  5. Summary - List rendering

8 Shopping list

  1. Project: Shopping list
  2. Item component
  3. List body
  4. Empty state

9 Events

  1. Events
  2. The event object
  3. Form events
  4. Summary - Events

10 useState

  1. What is state?
  2. The useState call
  3. Updating state
  4. Multiple state values
  5. Summary - useState

11 Counter app

  1. Project: Counter app
  2. Number and buttons
  3. Decrement and reset
  4. Boundary control

12 Forms

  1. Controlled input
  2. Form submission
  3. Multiple fields
  4. Summary - Forms

13 Styling

  1. Styling with CSS
  2. CSS Modules
  3. Inline styles
  4. Summary - Styling

14 styled-components

  1. What is styled-components?
  2. Styling with props
  3. Using themes
  4. Summary - styled-components

15 useReducer

  1. What is useReducer?
  2. Action and state
  3. useState vs useReducer
  4. Summary - useReducer

16 useEffect

  1. What is useEffect?
  2. Dependency array
  3. Cleanup function
  4. Summary - useEffect

17 Context

  1. What is context?
  2. createContext
  3. Provider and useContext
  4. Summary - Context

18 useRef

  1. What is useRef?
  2. DOM access
  3. Timer example
  4. Summary - useRef

19 Todo app

  1. Project: Todo app
  2. Todo entry form
  3. Todo list
  4. Filter and summary

20 Beginner final

  1. Challenge: Weather card
  2. Challenge: Cart summary
  3. Challenge: Counter and reset
  4. Challenge: Dropdown menu