React applications often have a few pieces of data that are global in nature. This means that several components, possibly every component in the app, share this data. For example, information about the currently logged-in user might be used in several places. In cases like this, it makes sense to provide a context where this data can be easily accessed by components that are rendered in this context.
In this section, you'll learn how to consume context data and how to consume it using Hooks.
Sharing fetched data
Most of our components will directly fetch the data that they and their children need. In other cases, our app has some API endpoint with data that is used by several components throughout the application. To share global data like this, you can use the React context API. As the name suggests, components that are rendered within a context are able to access the data provided by the context.
Let's build an example to help clarify what...