singletonHook.ts

import React, { useEffect, useState } from 'react';

import { batch } from 'react-redux';

import { mountIntoContainer, unmountFromContainer } from './SingletonHooksContainer';

export function singletonHook<HookReturn = any, HookArgs extends any[] = any[]>(
	initValue: HookReturn,
	useHookBody: () => HookReturn
) {
	let mounted = false;
	let initStateCalculated = false;
	let lastKnownState: HookReturn | undefined;
	let consumers: React.Dispatch<React.SetStateAction<HookReturn>>[] = [];

	const applyStateChange = (newState: HookReturn) => {
		lastKnownState = newState;
		batch(() => consumers.forEach((setState) => setState(newState)));
	};

	const stateInitializer = () => {
		if (!initStateCalculated) {
			lastKnownState = initValue;
			initStateCalculated = true;
		}
		return lastKnownState as HookReturn;
	};

	return (args: HookArgs) => {
		const [state, setState] = useState(stateInitializer);

		useEffect(() => {
			if (!mounted) {
				mounted = true;
				mountIntoContainer<HookReturn, HookArgs>({ initValue, useHookBody, applyStateChange, args });
			}

			consumers.push(setState);
			if (lastKnownState && lastKnownState !== state) {
				setState(lastKnownState);
			}

			return () => {
				consumers.splice(consumers.indexOf(setState), 1);
				if (consumers.length === 0) {
					mounted = false;
					initStateCalculated = false;
					lastKnownState = undefined;
					unmountFromContainer({ initValue, useHookBody, applyStateChange, args });
				}
			};
		}, []);

		return state;
	};
}