temp

Author: nebarf

.eslintrc.json

@@ -41,7 +41,7 @@
       "warn",
       {
         "additionalHooks":
-          "(useCompareCallback)"
+          "(useCompareCallback, useCompareMemo, useCompareEffect)"
       }
     ],
     "camelcase": "warn",

src/events-manager/use-bus-subscribe.ts

@@ -1,20 +1,32 @@
 import { useCompareEffect } from '../shared';
-import { useRef, useCallback, useContext } from 'react';
+import { useRef, useCallback } from 'react';
 import fastCompare from 'react-fast-compare';
 import { HttpEventClassType, HttpEventHandler } from './types';
-import { EventBusContext } from './event-bus-context';
+import { useEventBus } from './event-bus-context';
 
 export const useBusSubscribe = <T>(
   eventName: HttpEventClassType<T>,
   handler: HttpEventHandler<T>
 ): void => {
   // The event bus.
-  const eventBus = useContext(EventBusContext);
+  const eventBus = useEventBus();
 
   // A ref to unsubscribe from the event. It helps to avoid
   // registering the same event handler multiple times.
   const unsubscribeRef = useRef<() => void>();
 
+  // Keeps track of the first run of the hook and the related subscription.
+  const firstRunRef = useRef(true);
+  const unsubcribeFirstRunRef = useRef<() => void>();
+
+  // Subscribe to the event on first hook run. "useEffect" hook will first
+  // run after component rendering, if child components cause http events to
+  // be triggered they want be receveived from this subscriber.
+  if (firstRunRef.current) {
+    unsubcribeFirstRunRef.current = eventBus.subscribe(eventName, handler);
+    firstRunRef.current = false;
+  }
+
   /**
    * Detach the handler for the event.
    */
@@ -30,6 +42,10 @@ export const useBusSubscribe = <T>(
    */
   useCompareEffect(
     () => {
+      if (unsubcribeFirstRunRef.current) {
+        unsubcribeFirstRunRef.current();
+        unsubcribeFirstRunRef.current = undefined;
+      }
       // Subscribe to the event and keep track of the subscription.
       unsubscribeRef.current = eventBus.subscribe(eventName, handler);
 

src/shared/use-compare-layout-effect.ts

@@ -0,0 +1,14 @@
+import { DependencyList, EffectCallback, useLayoutEffect } from 'react';
+import { DepsAreEqual } from './types';
+import { useCompareRef } from './use-compare-ref';
+
+export function useCompareLayoutEffect(
+  callback: EffectCallback,
+  deps: DependencyList,
+  compare: DepsAreEqual
+): void {
+  const depsRef = useCompareRef(deps, compare);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useLayoutEffect(callback, depsRef.current);
+}