a gist for subscribing for an event as soon as possible. (before useEffect runs)

useEvent.tsx

type UnsubscribeFunc = () => void;

function useEvent(subscribeFunc: () => UnsubscribeFunc, deps: any[] = []) {
	// we use ref instead of useMemo because on strict mode useMemo is being called twice
	const unsubscribeFunc = useRef(subscribeFunc());

	useEffect(() => {
		// this will only be called after a change in deps.
		// initial subscription happens sooner than useEffect
		if (!unsubscribeFunc.current) {
			unsubscribeFunc.current = subscribeFunc();
		}

		return () => {
			unsubscribeFunc.current();
			unsubscribeFunc.current = null;
		};
	}, deps);
}