Add option to unmount hook if there are no consumers #458 (#459)

Author: bglownia

src/components/SingletonHooksContainer.js

@@ -8,7 +8,13 @@ let SingletonHooksContainerRendered = false;
 let SingletonHooksContainerMountedAutomatically = false;
 
 let mountQueue = [];
-const mountIntoContainerDefault = (item) => { mountQueue.push(item); };
+const mountIntoContainerDefault = (item) => {
+  mountQueue.push(item);
+  return () => {
+    throw new Error('damn');
+    // mountQueue = mountQueue.filter(i => i !== item);
+  };
+};
 let mountIntoContainer = mountIntoContainerDefault;
 
 export const SingletonHooksContainer = () => {
@@ -25,7 +31,12 @@ export const SingletonHooksContainer = () => {
   const [hooks, setHooks] = useState([]);
 
   useEffect(() => {
-    mountIntoContainer = item => setHooks(hooks => [...hooks, item]);
+    mountIntoContainer = item => {
+      setHooks(hooks => [...hooks, item]);
+      return () => {
+        setHooks(hooks => hooks.filter(i => i !== item));
+      };
+    };
     setHooks(mountQueue);
   }, []);
 
@@ -38,7 +49,7 @@ export const addHook = hook => {
     SingletonHooksContainerMountedAutomatically = true;
     mount(SingletonHooksContainer);
   }
-  mountIntoContainer(hook);
+  return mountIntoContainer(hook);
 };
 
 export const resetLocalStateForTests = () => {

src/singletonHook.js

@@ -2,8 +2,9 @@ import { useEffect, useState } from 'react';
 import { addHook } from './components/SingletonHooksContainer';
 import { batch } from './utils/env';
 
-export const singletonHook = (initValue, useHookBody) => {
+export const singletonHook = (initValue, useHookBody, unmountIfNoConsumers = false) => {
   let mounted = false;
+  let removeHook = undefined;
   let initStateCalculated = false;
   let lastKnownState = undefined;
   let consumers = [];
@@ -27,14 +28,20 @@ export const singletonHook = (initValue, useHookBody) => {
     useEffect(() => {
       if (!mounted) {
         mounted = true;
-        addHook({ initValue, useHookBody, applyStateChange });
+        removeHook = addHook({ initValue, useHookBody, applyStateChange });
       }
 
       consumers.push(setState);
       if (lastKnownState !== state) {
         setState(lastKnownState);
       }
-      return () => { consumers.splice(consumers.indexOf(setState), 1); };
+      return () => {
+        consumers.splice(consumers.indexOf(setState), 1);
+        if (consumers.length === 0 && unmountIfNoConsumers) {
+          removeHook();
+          mounted = false;
+        }
+      };
 
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);

test/integration/integration.spec.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import * as rtl from '@testing-library/react';
 import { singletonHook } from '../../src';
-import { resetLocalStateForTests } from '../../src/components/SingletonHooksContainer';
+import { resetLocalStateForTests, SingletonHooksContainer } from '../../src/components/SingletonHooksContainer';
 
 describe('singletonHook', () => {
   afterEach(() => {
@@ -108,4 +108,23 @@ describe('singletonHook', () => {
     rtl.render(<Tmp/>);
     expect(messages).toEqual(['initVal', 'newVal']);
   });
+
+  it('unmounts hook if no consumers', () => {
+    const unmountCallback = jest.fn();
+    const initVal = 'initVal';
+    const useHook = singletonHook(initVal, () => useEffect(() => unmountCallback), true);
+
+    const Tmp = () => {
+      useHook();
+      return null;
+    };
+
+    rtl.render(<SingletonHooksContainer/>);
+    const { unmount } = rtl.render(<Tmp/>);
+    const { unmount: unmountLastInstance } = rtl.render(<Tmp/>);
+    unmount();
+    expect(unmountCallback.mock.calls.length).toBe(0);
+    unmountLastInstance();
+    expect(unmountCallback.mock.calls.length).toBe(1);
+  });
 });

test/react-native/native.spec.js

@@ -97,4 +97,23 @@ describe('singletonHook', () => {
     );
     expect(messages).toEqual(['initVal', 'newVal']);
   });
+
+  it('unmounts hook if no consumers', () => {
+    const unmountCallback = jest.fn();
+    const initVal = 'initVal';
+    const useHook = singletonHook(initVal, () => useEffect(() => unmountCallback), true);
+
+    const Tmp = () => {
+      useHook();
+      return null;
+    };
+
+    rtl.render(<SingletonHooksContainer/>);
+    const { unmount } = rtl.render(<Tmp/>);
+    const { unmount: unmountLastInstance } = rtl.render(<Tmp/>);
+    unmount();
+    expect(unmountCallback.mock.calls.length).toBe(0);
+    unmountLastInstance();
+    expect(unmountCallback.mock.calls.length).toBe(1);
+  });
 });