The nearest common ancestor could be far removed from the components that need data, and lifting state up that high can lead to a situation called **“prop drilling”.** Context api solves that. Context lets the parent component make some information available to any component in the tree below it—no matter how deep—without passing it explicitly through props. import { createContext, useContext, useState } from 'react'; // 1. Create the context export const ImageSizeContext = createContext(500); export default function App() { const [imageSize, setImageSize] = useState(500); return ( // 2. Wrap the children. In React 19, works. // In older versions, use setImageSize(Number(e.target.value))} /> ); } function PlaceList() { // This component is a child of the provider, so its children can use the context const places = [{ id: 1, name: 'Lucknow' }]; return ( {places.map(p => )} ); } // 3. Use the hook inside a child component function PlaceImage({ place }) { const imageSize = useContext(ImageSizeContext); return ( ); }

Discuss Context api?

Difficulty: 6/10

state management, performance, testing

The Context API introduced in React version 16.3.0 is used to manage a global state that needs to be accessed by multiple components in a React application. Context provides a way to pass data through the component tree without having to pass props down manually at every level. In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

1
The nearest common ancestor could be far removed from the components that need data, and lifting state up that high can lead to a situation called “prop drilling”. Context api solves that.
2
Context lets the parent component make some information available to any component in the tree below it—no matter how deep—without passing it explicitly through props.

javascript

Discuss Context api?

Difficulty: 6/10

state management, performance, testing

The Context API introduced in React version 16.3.0 is used to manage a global state that needs to be accessed by multiple components in a React application. Context provides a way to pass data through the component tree without having to pass props down manually at every level. In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

1
The nearest common ancestor could be far removed from the components that need data, and lifting state up that high can lead to a situation called “prop drilling”. Context api solves that.
2
Context lets the parent component make some information available to any component in the tree below it—no matter how deep—without passing it explicitly through props.

javascript

Discuss Context api?

Discuss Context api?

Scenario Questions

Follow-up Questions