“Context provides a way to pass data through the component tree without having to pass props down manually at every level.” — React

Without React Context …

When you need to tell a child component about a change in the state notified by the principal and root components, we pass state from one component to another until we reach the child component. We need to inform it about the change.

The problem with this: At some point, when we end up passing from one to another component and so on. We have a phenomenon knows as Prop Drilling. The components we used in between the component that changed the state and the one that needs to know about that doesn't use the props for themself. They are just passing it until it reaches the child component we want to inform.

Those pôor components end up like a bridge that passes data through React props.

With React Context hooks …

Context's job in React is to share data or the app state across all the app components. This means that the props can be accessed from any component. Therefore, no need to pâss props through other components to send it at the end to our destination component. Less code, less debugging hassle, and more code visibility.

##When to use React Context Context is designed to share data that can be considered as "global" to the whole app. An example would be the authenticated user, a theme, or user preferences.

I've already used Context in the practical guide of building dark mode toggle. If you are interested in how I implemented this with React Context, here it is: