Prevent recalculation of initial reducer value

Author: patelnav

index.js

@@ -1,17 +1,24 @@
-import { useEffect, useReducer, useMemo } from 'react';
+import {
+  useEffect, useReducer, useMemo, useRef,
+} from 'react';
 
 // useFluxStore essentially combines useReducer and useEffect to use with FluxStores
 // useReducer: Used to extract relevant values from the store
 // useEffect is used to attach a listener to the store
 
 export function useFluxStore(store, reducer, deps = []) {
-  // Call useReducer and set initial value from current state of store.
+  // Use a ref to calculate reducer's initial value from current state of store.
+  const initReducer = useRef();
 
-  // We need to pass reducer(null, store) as initialArg otherwise the first out will be undefined
-  const [out, _dispatch] = useReducer(reducer, reducer(null, store));
+  if (!initReducer.current) {
+    initReducer.current = reducer(null, store);
+  }
+
+  // We need to pass an initialArg otherwise the first *out* will be undefined
+  const [out, _dispatch] = useReducer(reducer, initReducer.current);
 
   // For any dependencies in the reducer, we make sure to trigger the reducer again
-  useMemo(() => { _dispatch(store); }, deps);
+  useMemo(() => _dispatch(store), deps); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     function listener() {
@@ -28,8 +35,8 @@ export function useFluxStore(store, reducer, deps = []) {
 
     // On useEffect destruction, remove the listener
     return () => token.remove();
-  },
-  []); // We make sure to pass [] so we're not attaching/detaching  on every render
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  // We make sure to pass [] so we're not attaching/detaching  on every render
   return out; // Reducer value gets returned to useFluxStore
 }