Add lodash.isequal as a dependency. Clamp down on unnecessary re-renders!

Author: patelnav

README.md

@@ -3,7 +3,8 @@ Hooks implementation for Facebook [Flux Util](https://github.com/facebook/flux#F
 
 This takes advantage of the new [React Hooks API](https://reactjs.org/docs/hooks-intro.html), and is a great alternative to using Flux-Util's [Container](https://facebook.github.io/flux/docs/flux-utils.html#container).
 
-This is a very simple implementation using a combination of [useEffect](https://reactjs.org/docs/hooks-reference.html#useeffect) & [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer).
+This is an implementation using a combination of [useEffect](https://reactjs.org/docs/hooks-reference.html#useeffect) & [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer) and [lodash.isequal](#strict-equality).
+
 
 ## Install
 ```npm add flux-hooks``` or ```yarn add flux-hooks```
@@ -13,7 +14,7 @@ This is a very simple implementation using a combination of [useEffect](https://
 
 const **value_from_store** = (**prevState**, **store**) => {...}
 
-const **value** = **useFluxStore**(**store**: \<FluxStore>, **value_from_store**: Function, *deps*)
+const **value** = **useFluxStore**(**store**: \<FluxStore>, **value_from_store**: Function, **deps?**: Array, **strictEquality?**: boolean)
 
 # Usage
 
@@ -30,15 +31,19 @@ const CounterComponent = () => {
 }
 ~~~
 
-## Dependencies
+## Dependencies - **deps**
+
+The **deps** parameter is an Array of values as used by useCallback/useMemo.
 
-There are cases where the reducer is using other State/Prop values. Normally useReducer would not trigger a dispatch in this case. We use the **deps** parameter of useFluxStore as a list. 
+In cases where the reducer is using other State/Prop, pass them as deps. Normally useReducer would not trigger a dispatch in this case.
 
 ~~~
 import useFluxStore from 'flux-hooks';
+
 const SearchComponent = () => {
   const [query, setQuery] = useState("")
-  const results = useFluxStore(SearchStore, (prevState, store) => store.getSearchResults(query))
+
+  const results = useFluxStore(SearchStore, (prevState, store) => store.getSearchResults(query), [query])
 
   return <div>
     <input type="text" value={query} onChange={e => setQuery(e.target.value)} />
@@ -47,4 +52,15 @@ const SearchComponent = () => {
   </ul>
   </div>
 }
-~~~
+~~~
+
+## Strict Equality
+### Default: **OFF**
+
+Stores can update frequently with our reducer selecting only a small subset of the values. In the cases if you apply a filter on an [Immutable-js](https://immutable-js.github.io/immutable-js/docs) objects, or return multiple values using an Object, this will cause the [Object.is](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description) equality check to fail. This defeats the purpose of using the reducer!
+
+To prevent this, **[lodash.isequal](https://www.npmjs.com/package/lodash.isequal) is used by default**. This does a deep check whenever the reducer is run, to make sure nothing has changed. 
+
+The assumption here is that the equality check is cheaper to run than a re-render.
+
+To **opt out** of using the more expensive lodash.isequal check set **strictEquality** (4th argument) to **true**. This will return to useReducer's default behaviour.

index.js

@@ -1,43 +1,56 @@
 import {
-  useEffect, useReducer, useMemo, useRef,
+  useEffect, useReducer, useMemo,
 } from 'react';
 
-// useFluxStore essentially combines useReducer and useEffect to use with FluxStores
+
+import isEqual from 'lodash.isequal';
+
+// useFluxStore 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 = []) {
-  // Use a ref to calculate reducer's initial value from current state of store.
-  const initReducer = useRef();
 
-  if (!initReducer.current) {
-    initReducer.current = reducer(null, store);
+export function useFluxStore(store, reducer, deps = [], strictEquality = false) {
+  // We use Lodash's isEqual check to make sure the state hasn't changed
+  // This can be expensive, but cheaper than a re-render
+  function reducerWithEqualityCheck(_p, _store) {
+    const refreshVal = reducer(_p, _store);
+
+    if (isEqual(refreshVal, _p)) return _p;
+    return refreshVal;
   }
 
-  // We need to pass an initialArg otherwise the first *out* will be undefined
-  const [out, _dispatch] = useReducer(reducer, initReducer.current);
+  const [out, _dispatch] = useReducer(
+    strictEquality ? reducer : reducerWithEqualityCheck,
+    reducer(null, store),
+  );
+
+  // Watch dependencies, and dispatch if they change
+  useMemo(() => {
+    _dispatch(store);
+  }, deps); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // For any dependencies in the reducer, we make sure to trigger the reducer again
-  useMemo(() => _dispatch(store), deps); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
+    // Listener that is called when store is updated
     function listener() {
-      // When store is updated, we dispatch an update to the reducer
+      // We dispatch the store to the reducer
       _dispatch(store);
     }
 
-    // Attach reducer's listener to store
+    // Attach listener to store
     const token = store.addListener(listener);
 
-    // Instead of setting initial value as the second parameter on the useReducer, dispatch here:
-    // This avoids missing an update between useReducer --> render --> useEffect
+    // This avoids potentially missing an update between useReducer --> render --> useEffect
     _dispatch(store);
 
     // On useEffect destruction, remove the listener
-    return () => token.remove();
+    return token.remove;
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
-  // We make sure to pass [] so we're not attaching/detaching  on every render
+  // We make sure to pass [] so we're not attaching/detaching on every render
+
   return out; // Reducer value gets returned to useFluxStore
 }
 
+
 export default useFluxStore;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flux-hooks",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Hooks implementation for Facebook Flux Util's Stores",
   "main": "index.js",
   "scripts": {
@@ -18,7 +18,9 @@
   },
   "keywords": [
     "react",
-    "flux"
+    "flux",
+    "hooks",
+    "hook"
   ],
   "bugs": {
     "url": "https://github.com/Fieldscope/flux-hooks/issues"
@@ -30,5 +32,8 @@
     "eslint-plugin-import": "^2.17.2",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.13.0"
+  },
+  "dependencies": {
+    "lodash.isequal": "^4.5.0"
   }
 }