Merge pull request #21 from nebarf/subscribe-fix

Subscribe fix

Author: nebarf

.eslintrc.json

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

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

@@ -1,15 +1,15 @@
-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';
+import { useCompareLayoutEffect } from '../shared/use-compare-layout-effect';
 
 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.
@@ -28,7 +28,7 @@ export const useBusSubscribe = <T>(
   /**
    * Setup the event handler.
    */
-  useCompareEffect(
+  useCompareLayoutEffect(
     () => {
       // 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);
+}