DI with React context

In the previous section, we used DI in a very straightforward way by just injecting components. React comes with its own mechanism for DI.

React context can be used to inject dependencies into components that are very far in the chain from the container component. This makes React context a great fit for global dependencies that are reused across the whole application.

Good examples of such a global dependency are a theme configuration, a logger, a dispatcher, a logged in user object, or language options.

Using the React Context API

To learn about the React Context API, we will use a simple language selector. I have created a component that allows us to select one of two languages, either English or Polish...