Dependency Injection with React using InversifyJS Inversion of Control Container

In this video Steve demonstrates the concept of Dependency Injection and how it could be done in React using an Inversion of Control Container called InversifyJS.
Dependency Injection is not a concept used in Javascript very often but after watching this video you will have a better understanding of how it can replace some of the complex tools you may currently be using.
InversifyJS offers a way to create and manage the lifetime of objects you may need throughout your application. When used effectively it can even help you manage global state without the need for React Context or Redux.
----------

[@ProgrammingMadeEZ]

Sorry folks I kinda rambled a bit for the intro. Talk really starts at about 4:18.

[@hr.sanders]

pleased to see you back after a while.

[@LjaDj5XQKey9mSDxh4]

Waw that's very cool! Very elegant architecture. Would really like to see more on this topic, adding DDD, RxJS etc

[@sunwado]

This is exactly what I'm looking for. Very well presented and really helpful to setup IOC in React. Got Repo is very useful to.

[@ProgrammingMadeEZ]

Glad it was helpful!

[@juliano_mio]

Thanks a lot for this coding session!
There are just two small things I wanted to let you know.
1. To prevent functional component variables (in this case the counter service) from regenerating every time, you can use useMemo which memoizes the value of the variable until one of the dependency props inside the dependency array updates.
2. Interfaces can’t be used to resolve components with InversifyJS because Interfaces only exist during development. Strictly speaking they are part of TypeScript and since JavaScript has no typings (except typeof but that’s a different story) they won’t be available anymore once TypeScript is transpiled to JavaScript.

[@ShahTV]

Nice tutorial, everything is on point.
hey, thanks a bunch for this and the other tutorials, it means very much for a beginner like me.

[@sebastiankurzynowski5841]

Cool tutorial :) One small update, reflect-metadata should be imported once ( there is info about it in inversify documentation )

[@kurokur0kurO]

I just found out about IOC today and this video helped me a lot.
When you were removing the redux code, I felt a vast amount of relief. I was prepared to watch another video to learn how to apply this on functional components but then you actually also covered that!
At the time of this comment, I've only watched the functional component part but I have a few questions:
1. Instead of using [count, setCount], can't we just access the _counterService.count and _counterService.increment directly?
2. Is it a good idea to mix classes with functional components? From what I understand, the types can only be classes though the functional components doesn't really care about it. I just want to hear your thoughts on this matter.
3. Can useContext (or custom hooks) be considered as IOC? And actually, I'm wondering if this whole thing is "real" IOC. I've watched a few IOC videos before this and what I got from those are dependencies should be passed instead of declaring it. In this video, you declared the CounterService in the component itself. Should it have been declared somewhere then just be passed to the component instead?

[@ProgrammingMadeEZ]

I just realized I incorrectly cited a disagreement of implementation for decorators between Webpack and Typescript. It's actually Babel and TypeScript. These things happen when you talk in real time... :(

[@mikochu7746]

Awesome tutorial bro!!!

[@ProgrammingMadeEZ]

Glad you liked it!

[@saidakhmedbayev]

I wonder about the performance of this approach... What happens if I am calling the weather fetch service, does it cause the counter components to re-render?

[@Mincier]

context is not DI, context is a service locator, which is a bit of an antipattern

[@yourkaa5670]

Code source ?

[@momenali3989]

Kindly assist me how to share access database file on onedrive app inside my company?

[@ProgrammingMadeEZ]

Don't do it.

[@roy3874]

How can we use this in functional component ? there we have useInjection hook .. can you suggest ?

[@jeremiasleao518]

recently I found a library to do this in class and function. The library is react-ioc

[@rumble1925]

I think you just need to stabilise the reference. I think something like const service = useRef(container.get(Service)) would work

[@insideTheMirror_]

Why would one use this over Context API?

[@ProgrammingMadeEZ]

You can do more than just state management. That's just one thing you can do. You can split up your API service calls into different services, and if you have multiple API's to call you can have different service modules for each.
You could do some similar things with Context API, but it's a little more jenky.

[@uripre]

I appreciate your effort in making this video, but this is way too long in order to explain a concept.

[@ProgrammingMadeEZ]

It's explanation and implementation with demonstration, but I understand your point. I try to be comprehensive in my explanations which can cause it to take longer but usually people appreciate having a comprehensive view of the topic than something short and missing context.

[@in3135]

You don't even know what you are doing, you are just copying your code on the second screen without explaining things in depth.