Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 27 additions & 6 deletions content/react/concepts/context/context.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
---
Title: 'Context'
Description: 'In React, Context can be used to manage state globally without the need of prop drilling.'
Description: 'Enables data sharing across the component tree without passing props down manually at every level.'
Subjects:
- 'Computer Science'
- 'Web Development'
Tags:
- 'Components'
Expand All @@ -11,12 +12,32 @@ CatalogContent:
- 'paths/front-end-engineer-career-path'
---

The **Context** API in [React](https://www.codecademy.com/resources/docs/react) is an easy way to manage the state of some information. It lets the parent [component](https://www.codecademy.com/resources/docs/react/components) pass the information down to any other component further down the tree hierarchy without needing to pass it as a [prop](https://www.codecademy.com/resources/docs/react/props). It can be used in combination with the [`useState()`](https://www.codecademy.com/resources/docs/react/hooks/useState) hook to change the state. Typical use cases are passing themes (e.g. color, paddings, font sizes, etc.) or the authenticated user.
**Context** in React is a powerful mechanism that enables data sharing across the component tree without the need to pass props down manually at every level. Context solves the "prop drilling" problem by allowing components to access shared state or data directly, regardless of their position in the component hierarchy. Context should be used when multiple components at different nesting levels need access to the same data, such as user authentication status, theme preferences, or application settings.

## Benefit
## Implementation Methods

Normally, information on values is passed between components as props. But sometimes it has to be passed down several levels in the tree, also called `prop drilling`. In larger applications, this can be complicated and lead to code that is hard to maintain. With `Context` this is no longer necessary.
Context is implemented using three core React APIs:

## API Implementation
- [`createContext()`](https://www.codecademy.com/resources/docs/react/context/createContext): Creates a new context object that can hold and share data
- `Context.Provider`: A component that supplies the context value to its descendants
- [`useContext()`](https://www.codecademy.com/resources/docs/react/context/createContext): A React hook that consumes context values within functional components

To implement the Context API, it's necessary to first create the Context using [`createContext()`](https://www.codecademy.com/resources/docs/react/context/createContext). Afterward, the [`useContext()`](https://www.codecademy.com/resources/docs/react/hooks/useContext) hook can be used to read the context from the appropriate component.
The typical setup is:

1. Create a context using `createContext()` with an optional default value.
2. Wrap components needing access in `Context.Provider` and pass the shared `value` via the value prop.
3. Use `useContext()` in child components to consume the nearest context value.

## Frequently Asked Questions

### 1. Why do we need to use Context?

It avoids passing props through multiple layers when many components need the same data. This makes code easier to maintain.

### 2. Is React Context a hook?

No, React Context is not a hook. Context is a feature consisting of `createContext()` and Provider/Consumer components. However, `useContext()` is a hook that allows functional components to consume context values.

### 3. When to use React Context vs Redux?

Use Context for simpler state management like themes, user data, or small-to-medium applications. Choose Redux for complex applications with frequent state updates, complex state logic, and when you need advanced debugging tools.