Fix bug where we attach/detach on every render. + Documentation + ESLint config

Author: patelnav

.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  extends: 'airbnb',
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  plugins: [
+    'react',
+  ],
+  rules: {
+  },
+};

.gitignore

@@ -0,0 +1 @@
+node_modules

index.js

@@ -1,21 +1,26 @@
 import { useEffect, useReducer } 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, storeReducer) {
-  const [out, _dispatch] = useReducer((prevState, store) => {
-    return storeReducer(prevState, store)
-  }, storeReducer(null, store))
+  // Call useReducer and set initial value from current state of store.
+  const [out, _dispatch] = useReducer(storeReducer, storeReducer(null, store));
 
   useEffect(() => {
     function listener() {
-      _dispatch(store)
+      // When store is updated, we dispatch an update to the reducer
+      _dispatch(store);
     }
 
-    const token = store.addListener(listener)
-    return () => {
-      token.remove()
-    }
-  })
-  return out
+    // Attach reducer's listener to store
+    const token = store.addListener(listener);
+    // On useEffect destruction, remove the listener
+    return () => token.remove();
+  },
+  []); // 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
+export default useFluxStore;

package.json

@@ -23,5 +23,12 @@
   "bugs": {
     "url": "https://github.com/Fieldscope/flux-hooks/issues"
   },
-  "homepage": "https://github.com/Fieldscope/flux-hooks#readme"
-}
+  "homepage": "https://github.com/Fieldscope/flux-hooks#readme",
+  "devDependencies": {
+    "eslint": "^5.16.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-plugin-import": "^2.17.2",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-react": "^7.13.0"
+  }
+}