SingletonHooksContainer.tsx

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

import { SingleItemContainer } from './SingleItemContainer';
import { Hook } from './singletonHookTypes';

let SingletonHooksContainerMounted = false;

export let mountIntoContainer: <HookReturn = any, HookArgs extends any[] = any[]>(
	hook: Hook<HookReturn, HookArgs>
) => void;
export let unmountFromContainer: <HookReturn = any, HookArgs extends any[] = any[]>(
	hook: Hook<HookReturn, HookArgs>
) => void;

export const SingletonHooksContainer = () => {
	useEffect(() => {
		if (SingletonHooksContainerMounted) {
			console?.log?.(
				'SingletonHooksContainer is mounted second time. ' +
					'You should mount SingletonHooksContainer before any other component and never unmount it.'
			);
		}

		SingletonHooksContainerMounted = true;

		return () => {
			SingletonHooksContainerMounted = false;
		};
	}, []);

	const [hooks, setHooks] = useState<Hook[]>([]);

	useEffect(() => {
		mountIntoContainer = (newHook: Hook) => setHooks((hooks) => [...hooks, newHook]);
		unmountFromContainer = (hookToUnmount: Hook) =>
			setHooks((hooks) => hooks.filter((hook) => hook.useHookBody !== hookToUnmount.useHookBody));
		setHooks([]);
	}, []);

	return (
		<>
			{hooks.map((hook, index) => (
				<SingleItemContainer {...hook} key={index} />
			))}
		</>
	);
};