Dependency injection in React using InversifyJS. Now with React Hooks
Nearly a year ago I wrote an article about dependency injection in React. I showed how to inject dependencies into class components from InversifyJS containers. Since then we’ve witnessed the release of one of the most anticipated React features — Hooks. If you’ve never heard about them, you should definitely go to docs and learn about them. The key thing is that we can now do a lot more with functional components and they are really user-friendly. In this article, I’d like to show you how easy it is to use InversifyJS with Hooks with a very simple example.
Example project
The project we’ll be working on is nearly the same as the one from the previous article. The only difference is that I’ve refactored the Hello component to be functional. Everything’s done in TypeScript, but you can do it almost the same way in pure JavaScript (there are some differences in decorators usage, but these are covered in Inversify’s docs).
For more information about that code, I recommend reading the “Example project” section of a previous article.
Creating our own injection provider
To accomplish this task, we will mainly use two React functionalities — Context API (since v.16.3) and React Hooks (since v.16.8).
Context API is the way to pass data through the whole component tree without using props. You can read about the details in docs, since I don’t want to go deep into the weeds of Context here. You’ve probably used it already in an indirect way — a lot of popular libraries use it (react-redux, styled-components, etc.). If a library tells you to wrap everything on the root level with a provider component, then it probably uses Context.
Our injection provider will comprise two elements:
- A provider component that will wrap everything on the root level, where the developer will provide a reference to Inversify’s container.
- A Hook for injecting dependency into component.
Provider component
We will use Context to create a provider component. First, we need to create a new Context with the createContext function. This returns an object containing two ready components — Provider and Consumer. Provider is a top-level component which is used to send things down into React’s tree, and Consumer uses that data. What does this mean for us? That we can use it directly to accomplish our task. An example of how this can be done is in Listing 2.
Pretty simple, isn’t it? If you remember inversify-react or react-inversify from the previous article, you will surely know how to use it. It’s exactly the same component, but this time it’s been made by us. Listing 3 shows us how to use it in the code on the application’s root level.
Injection hook
Now we need a way to get the object from Inversify’s container. We want to do it as a function which will work as a React Hook, and it should use the container provided by the user in the Provider component. So, how are we to achieve this? As you likely remember, after creating Context we had an object which contained a Provider and Consumer. Usually, the Consumer is used as a component to access the data in a context through it. However, since we have React Hooks, we don’t need to use a Consumer. One of the most important Hooks built into React is useContext. It does a simple thing — it returns the current context value and subscribes to its changes. In Context we have the container instance, so we can use any method from it that we need (in our case the method will be get, but you may also want to create an additional hook with getAll to simulate multiInject). Of course, the developer should provide the identifier to our Hook as an argument so that Inversify will be able to identify what we need. You can see a very simple implementation of this in Listing 4.
Now we can safely use it in our example app, in Hello.tsx, as shown on Listing 5.
As you can see, in a few lines of code we were able to create the whole provider for the dependency injection with very simple usage. Of course, it can be extended — you may want to add a hook for multi-injection or a higher order component to use in class components.
You can find the whole example on my GitHub:
Q&A
Since it’s so simple, I’m sure there are a lot of questions about it. I’ve thought about a few cases and want to give you answers in the same article.
Why use such boilerplate when you can access the container directly from the component?
That’s to keep a single source of truth and not to make the component dependent on a specific container. In one code base we may have many containers (e.g. each route has a different one), but components may be shared between them.
So we shouldn’t use the libraries that you mentioned in the previous article?
Of course not! It’s just to show an alternative way of achieving the same thing. It’s so simple that you may want to consider using it, but I’m not forcing you to do anything.
I want to use a library for that, but are there any with Hooks?
Yes, there are. While I was writing this article, I wanted to check whether someone had already implemented the idea. I found a very nice library — react-injection. It gives us both a higher-order component and a hook to provide injections into components. If you want to use a library to connect Inversify with React using hooks, this may be a good way to go.
Post was also published on the blog of Synergy Codes — a software house specializing in process visualization, mapping and modeling.
Are you interested in creating data visualization apps? Click here to learn about GoJS library!
