DI container in React on top of React Context API

[stalniy]

Summary

This proposal suggests to use DI container in React code. Instead of importing some service (e.g., axios) we need in a component, we should instead use React.useContext to use provided service instance.

Motivation

Currently, code imports whatever service is needed in a component or hook. This leads to less testable code, what leads to absence of unit tests. By introducing single React.Context that provides all services at root level, we will be able to inject them at component level using useContext hook. This allows us to create a simple DI container on top of React's Context API

Example

Without DI container

import axios from 'axios

export const MyComponent: React.FunctionComponent = () => {
   const [response, setResponse] = useState(null);
   useEffect(async () => {
      const response = axios.get('....');
      setResponse(response);
    }, []);

   return // ...
}

With DI container

import { useServices } from "@src/context/ServicesProvider";
import { useState } from 'react';

export const MyComponent: React.FunctionComponent = () => {
   const [response, setResponse] = useState(null);
   const { axios } = useServices();
   useEffect(async () => {
      const response = axios.get('....');
      setResponse(response);
    }, []);

   return // ...
}

• <ServiceContainer value={}> application context provider

Main benefits

• more testable code

[baktun14]

This is an interesting concept, the services provider would just import and expose on the context and it's easier to mock useService than individual imports?