Introduction

Some background to Dependency Injection (DI)

If you have experience working with other JavaScript frameworks like Angular or a back-end programming language like C#, then you must have seen a concept called Dependency Injection (DI). According to Wikipedia, DI is defined as:

Dependency injection is a technique whereby one object supplies the dependencies of another object.

In simple terms, if your function or class requires some external data, use a built-in “mechanism” to obtain that data without having to write new code. Some of the immediate benefits of using DI are decoupling of various features and ease of unit testing.

When it comes to React, the term DI is not used often. It does not mean that React does not utilize the Dependency Injection principle. Using Context API to share props in various components is similar to using DI effectively.