SingleItemContainer.tsx

import { useEffect, useRef } from 'react';

import { Hook } from './singletonHookTypes';

export const SingleItemContainer = ({ initValue, useHookBody, applyStateChange, args = [] }: Hook) => {
	const lastState = useRef(initValue);
	if (typeof useHookBody !== 'function') {
		throw new Error(`function expected as hook body parameter. got ${typeof useHookBody}`);
	}

	const hookReturn = useHookBody(...args);

	useEffect(() => {
		//apply change to consumers if value has changed
		if (lastState.current !== hookReturn) {
			lastState.current = hookReturn;
			applyStateChange(hookReturn);
		}
	}, [applyStateChange, JSON.stringify(hookReturn)]); //eslint-disable-line react-hooks/exhaustive-deps

	return null;
};