Providing and consuming context
As your React application grows, it will use more components. Not only will it have more components, but the structure of your application will change so that the components are nested more deeply. The components that are nested at the deepest level still need to have data passed to them. Passing data from a parent component to a child component isn't a big deal. The challenge is when you have to start using components as indirection for passing data around your app.
For data that needs to make its way to any component in your app, you can create and use a context. There are two key concepts to remember when using contexts in React— providers and consumers. A context provider creates data and makes sure that it's available to any React components. A context consumer is a component that uses this data within the context.
You might be wondering whether or not context is just another way of saying global data in a React application...