Sharing data with a context

Sometimes, we need to share data between several components, without having to manually pass it down at each level via props. This is especially the case for:

• An interface theme (light/dark)
• The logged-in user
• The chosen language
• A cart or a currency

To avoid passing props at every level, React provides us with an elegant solution: context, thanks to the useContext hook.

What is a context?

A context is like a shared data box. We fill it somewhere in the component tree, and any component located below can access it, without needing to explicitly receive a prop.