fix: Fix re-renders of component with di context provider causing unnecessary rerenders for children

Signed-off-by: Janne Savolainen <[email protected]>

Author: jansav

packages/injectable/react/index.d.ts

@@ -45,11 +45,7 @@ export declare function getInjectableComponent<
   },
 ): InjectableComponent<Component>;
 
-interface DiContainerProviderProps {
-  di: DiContainer | DiContainerForInjection;
-}
-
-export const DiContextProvider: React.Provider<DiContainerProviderProps>;
+export const DiContextProvider: React.Provider<DiContainer | DiContainerForInjection>;
 
 export interface WithInjectablesSyncOptions<
   Dependencies extends object,
@@ -96,5 +92,3 @@ export interface WithInjectables {
 }
 
 export const withInjectables: WithInjectables;
-
-export function registerInjectableReact(di: DiContainer): void;

packages/injectable/react/index.js

@@ -2,9 +2,7 @@ import withInjectables, {
   DiContextProvider,
 } from './src/withInjectables/withInjectables';
 
-import registerInjectableReact from './src/registerInjectableReact/registerInjectableReact';
-
-export { withInjectables, DiContextProvider, registerInjectableReact };
+export { withInjectables, DiContextProvider };
 
 export { getInjectableComponent } from './src/getInjectableComponent/getInjectableComponent';
 export { useInject, useInjectDeferred } from './src/useInject/useInject';

packages/injectable/react/src/getInjectableComponent/getInjectableComponent.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, Suspense, useContext } from 'react';
+import React, { forwardRef, Suspense, useContext, useMemo } from 'react';
 
 import { getInjectable, lifecycleEnum } from '@lensapp/injectable';
 import { useInjectDeferred } from '../useInject/useInject';
@@ -34,11 +34,11 @@ export const getInjectableComponent = ({
 
   const InjectableComponent = Object.assign(
     forwardRef((props, ref) => {
-      const { di: failSafeDi } = useContext(diContext);
+      const failSafeDi = useContext(diContext);
       const InjectedComponent = useInjectDeferred(InjectableComponent);
 
       return (
-        <DiContextProvider value={{ di: diForComponentContext || failSafeDi }}>
+        <DiContextProvider value={diForComponentContext || failSafeDi}>
           {PlaceholderComponent ? (
             <Suspense fallback={<PlaceholderComponent {...props} />}>
               <InjectedComponent {...props} ref={ref} />

packages/injectable/react/src/getInjectableComponent/getInjectableComponent.test.jsx

@@ -539,15 +539,15 @@ describe('getInjectableComponent', () => {
 
     const rendered = render(
       <div>
-        <DiContextProvider value={{ di: di1 }}>
+        <DiContextProvider value={di1}>
           <SomeComponent data-component-in-di-1-test />
         </DiContextProvider>
 
-        <DiContextProvider value={{ di: di2 }}>
+        <DiContextProvider value={di2}>
           <SomeComponent data-component-in-di-2-test />
         </DiContextProvider>
 
-        <DiContextProvider value={{ di: di1 }}>
+        <DiContextProvider value={di1}>
           <SomeComponent data-component-in-di-1-test />
         </DiContextProvider>
       </div>,
@@ -642,7 +642,7 @@ describe('getInjectableComponent', () => {
 
     const rendered = render(
       <div>
-        <DiContextProvider value={{ di }}>
+        <DiContextProvider value={di}>
           <SomeComponent name="some-name" />
         </DiContextProvider>
       </div>,
@@ -660,7 +660,7 @@ describe('getInjectableComponent', () => {
 const mountFor = (di, onRenderingError) => node =>
   render(
     <ErrorBoundary onError={onRenderingError}>
-      <DiContextProvider value={{ di }}>{node}</DiContextProvider>
+      <DiContextProvider value={di}>{node}</DiContextProvider>
     </ErrorBoundary>,
   );
 

packages/injectable/react/src/registerInjectableReact/registerInjectableReact.js

@@ -9,7 +9,7 @@ const useNonDeferredValue = x => x;
 const _useInject = (injectable, instantiationParameter, config) => {
   checkForUnsupportedAsyncTransient(injectable);
 
-  const { di } = useContext(diContext);
+  const di = useContext(diContext);
 
   const maybePromise = useMemo(
     () => di.inject(injectable, instantiationParameter),

packages/injectable/react/src/useInject/useInject.jsx

@@ -1,6 +1,6 @@
 import { noop } from 'lodash/fp';
 import { observable, runInAction } from 'mobx';
-import { Observer } from 'mobx-react';
+import { Observer, observer } from 'mobx-react';
 import React, { Suspense, useEffect } from 'react';
 import { act, render } from '@testing-library/react';
 
@@ -12,7 +12,6 @@ import {
 } from '@lensapp/injectable';
 
 import asyncFn from '@async-fn/jest';
-import registerInjectableReact from '../registerInjectableReact/registerInjectableReact';
 import { DiContextProvider } from '../withInjectables/withInjectables';
 import { useInjectDeferred, useInject } from './useInject';
 import { flushPromises } from '@lensapp/ogre-test-utils';
@@ -29,11 +28,50 @@ describe('useInject', () => {
 
     jest.spyOn(di, 'inject');
 
-    registerInjectableReact(di);
-
     mount = mountFor(di, onErrorWhileRenderingMock);
   });
 
+  it('given parent component with context provider, when parent rerenders, does not cause unnecessary rerenders for childs', async () => {
+    const someInjectable = getInjectable({
+      id: 'some',
+      instantiate: di => 'irrelevant',
+    });
+
+    di.register(someInjectable);
+
+    const childComponentRenderMock = jest.fn();
+
+    const SomeChildComponentWithUseInject = () => {
+      childComponentRenderMock();
+
+      useInject(someInjectable);
+
+      return <div>irrelevant</div>;
+    };
+
+    const someObservable = observable.box(0);
+
+    const SomeParentComponentWithContextProvider = observer(({ children }) => {
+      someObservable.get();
+
+      return <DiContextProvider value={di}>>{children}</DiContextProvider>;
+    });
+
+    render(
+      <SomeParentComponentWithContextProvider>
+        <SomeChildComponentWithUseInject />
+      </SomeParentComponentWithContextProvider>,
+    );
+
+    await act(async () => {
+      runInAction(() => {
+        someObservable.set(1);
+      });
+    });
+
+    expect(childComponentRenderMock).toHaveBeenCalledTimes(1);
+  });
+
   describe('given a sync injectable, when rendered', () => {
     let rendered;
     let someRelatedPropState;
@@ -1682,7 +1720,7 @@ describe('useInject', () => {
 const mountFor = (di, onRenderingError) => node =>
   render(
     <ErrorBoundary onError={onRenderingError}>
-      <DiContextProvider value={{ di }}>{node}</DiContextProvider>
+      <DiContextProvider value={di}>{node}</DiContextProvider>
     </ErrorBoundary>,
   );
 

packages/injectable/react/src/useInject/useInject.test.jsx

@@ -1,20 +1,13 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { constant } from 'lodash/fp';
 
 import { isPromise } from '@lensapp/fp';
-import { getInjectable, lifecycleEnum } from '@lensapp/injectable';
-
 export const diContext = React.createContext();
 
 const { Provider: DiContextProvider, Consumer: DiContextConsumer } = diContext;
 
 export { DiContextProvider };
 
-export const componentNameMapInjectable = getInjectable({
-  id: 'component-name-map',
-  instantiate: () => new Map(),
-});
-
 const ComponentOrPlaceholder = ({
   di,
   nonDependencyProps,
@@ -23,10 +16,21 @@ const ComponentOrPlaceholder = ({
   Component,
   refProps,
 }) => {
+  const diForComponentContext = useMemo(() => {
+    return {
+      ...di,
+
+      inject: (alias, parameter) => di.inject(alias, parameter, {}),
+
+      injectMany: (injectionToken, parameter) =>
+        di.injectMany(injectionToken, parameter, {}),
+    };
+  }, [di]);
+
   const [propsState, setPropsState] = useState();
 
   React.useLayoutEffect(() => {
-    const maybeAsyncProps = getProps(di, nonDependencyProps);
+    const maybeAsyncProps = getProps(diForComponentContext, nonDependencyProps);
 
     if (isPromise(maybeAsyncProps)) {
       maybeAsyncProps.then(setPropsState);
@@ -45,40 +49,12 @@ const ComponentOrPlaceholder = ({
 export default (Component, { getPlaceholder = constant(null), getProps }) =>
   React.forwardRef((nonDependencyProps, ref) => (
     <DiContextConsumer>
-      {({ di }) => {
-        const componentNameMap = di.inject(componentNameMapInjectable);
-
-        if (!componentNameMap.has(Component)) {
-          componentNameMap.set(
-            Component,
-            Component.displayName ||
-              Component.name ||
-              `anonymous-component-${componentNameMap.size}`,
-          );
-        }
-
-        const componentContext = {
-          injectable: {
-            id: componentNameMap.get(Component),
-            lifecycle: lifecycleEnum.transient,
-          },
-        };
-
-        const diForComponentContext = {
-          ...di,
-
-          inject: (alias, parameter) =>
-            di.inject(alias, parameter, componentContext),
-
-          injectMany: (injectionToken, parameter) =>
-            di.injectMany(injectionToken, parameter, componentContext),
-        };
-
+      {di => {
         const refProps = ref ? { ref } : {};
 
         return (
           <ComponentOrPlaceholder
-            di={diForComponentContext}
+            di={di}
             nonDependencyProps={nonDependencyProps}
             getPlaceholder={getPlaceholder}
             getProps={getProps}

packages/injectable/react/src/withInjectables/withInjectables.js

@@ -13,15 +13,12 @@ import withInjectables, { DiContextProvider } from './withInjectables';
 import asyncFn from '@async-fn/jest';
 import { observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
-import registerInjectableReact from '../registerInjectableReact/registerInjectableReact';
 import { keys } from 'lodash/fp';
 
-const flushPromises = () => new Promise(flushMicroTasks);
-
 const mountFor =
   di =>
   (node, ...rest) =>
-    render(<DiContextProvider value={{ di }}>{node}</DiContextProvider>, {
+    render(<DiContextProvider value={di}>{node}</DiContextProvider>, {
       ...rest,
     });
 
@@ -32,8 +29,6 @@ describe('withInjectables', () => {
   beforeEach(() => {
     di = createContainer('some-container');
 
-    registerInjectableReact(di);
-
     mount = mountFor(di);
   });