Modern front-end frameworks like React, Vue, and Angular has changed the way our web looks like today. A maximum of them are using a component-based approach. But communication among the components is an important part. The way components communicate and share state with each other, defines their success story. To create maintainable software by separating different parts of logic and state into dedicated components is a bit tricky.

Passing data to deeply nested child components can be cumbersome, especially when dealing with child components several levels down a component tree. Without React Context or Redux, we resort to a technique called “prop drilling” where we pass data down components even though some of those components don’t need that specific data.

Using React Context

Context in React allows you to pass data to any component without “prop drilling”. Also, it is possible to update the context data from any subscribed component.

We will use a simple example that will help us to understand the main concept of Context.

First of all, we will create a context for user data.

#context-api #state-management #javascript #react #redux