Merge pull request #11 from beizhedenglong/effect

feat(hooks): add useDeepEqualEffect and useShallowEqualEffect

README.md

@@ -22,12 +22,15 @@ Visit [storybook](https://beizhedenglong.github.io/react-hooks-lib)
 | [`createContextState`](#createContextStateInitial)       | initial                            | { ContextProvider, ContextConsumer,  set, useContextState }  |
 | [`createGlobalState`](#createGlobalStateInitial)         | initial                            | { GlobalProvider, GlobalConsumer, set, useGlobalState }      |
 | [`useMergeState`](#usemergestateinitial)                 | initial                            | { state, set }                                               |
-| [`useStateCallback`](#useStateCallbackInitial-f)                 | initial, f                            | { state, set }                                               |
+| [`useStateCallback`](#useStateCallbackInitial-f)         | initial, f                         | { state, set }                                               |
 | [`useUndo`](#useUndoInitial)                             | initial                            | { past, present, future, set, undo, redo }                   |
 | [`useCounter`](#useCounterInitial)                       | initial                            | { count, set, reset, inc, dec }                              |
 | [`useToggle`](#useToggleInitial)                         | initial                            | { on, set, reset, toggle }                                   |
 | [`useList`](#useListInitial)                             | initial                            | { list, set, reset, push, sort, filter }                     |
 | [`useMap`](#useMapInitial)                               | initial                            | { values, set, reset, clear, get, has, del }                 |
+| <h6>Effect</h6>                                      |                                    |                                                              |
+| `useShallowEqualEffect`                                  | f, deps                            | -                                                            |
+| `useDeepEqualEffect`                                     | f, deps                            | -                                                            |
 | <h6>Network</h6>                                         |                                    |                                                              |
 | [`useFetch`](#useFetchInitialUrl-initialOptions-onMount) | initialUrl, initialOptions, config | { loading, data, error, fetch, setUrl, setOptions, setData } |
 | [`useOnlineStatus`](#useonlinestatus)                    |                                    |                                                              |

__tests__/effect.test.js

@@ -0,0 +1,45 @@
+import 'react-testing-library/cleanup-after-each'
+import React, { useEffect } from 'react'
+import {
+  render, fireEvent,
+} from 'react-testing-library'
+import {
+  useCounter, useDeepEqualEffect, useShallowEqualEffect,
+} from '../src/index'
+
+const fn = jest.fn()
+const shallowFn = jest.fn()
+const shallowFn2 = jest.fn()
+const deepFn = jest.fn()
+jest.useFakeTimers()
+
+
+const Example = () => {
+  const { inc } = useCounter(0)
+  useEffect(fn, [{ name: 'victor' }])
+  useShallowEqualEffect(shallowFn, [{ name: 'victor' }])
+  useShallowEqualEffect(shallowFn2, [{ a: { b: 1 } }])
+  useDeepEqualEffect(deepFn, [{ a: { b: 1 } }])
+  return (
+    <div>
+      <button onClick={() => inc(1)}>+1</button>
+    </div>
+  )
+}
+const { getByText } = render(<Example />)
+
+test('effect', async () => {
+  jest.runAllTimers()
+  expect(fn).toBeCalledTimes(1)
+  expect(shallowFn).toBeCalledTimes(1)
+  expect(shallowFn2).toBeCalledTimes(1)
+  expect(deepFn).toBeCalledTimes(1)
+
+  fireEvent.click(getByText('+1'))
+  fireEvent.click(getByText('+1'))
+  jest.runAllTimers()
+  expect(fn).toBeCalledTimes(3)
+  expect(shallowFn).toBeCalledTimes(1)
+  expect(shallowFn2).toBeCalledTimes(3)
+  expect(deepFn).toBeCalledTimes(1)
+})

package.json

@@ -11,7 +11,7 @@
     "dev": "microbundle watch -o dist/ --sourcemap false --no-compress",
     "test": "jest --coverage --config=jest.config.js",
     "report-coverage": "cat ./coverage/lcov.info | coveralls",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6006 --ci",
     "build-storybook": "build-storybook",
     "deploy-storybook": "storybook-to-ghpages",
     "semantic-release": "semantic-release"
@@ -23,7 +23,8 @@
   },
   "husky": {
     "hooks": {
-      "pre-push": "yarn test"
+      "pre-push": "yarn test",
+      "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true"
     }
   },
   "keywords": [
@@ -78,7 +79,10 @@
   "peerDependencies": {
     "react": "^16.8.0"
   },
-  "dependencies": {},
+  "dependencies": {
+    "lodash.isequal": "^4.5.0",
+    "shallowequal": "^1.1.0"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/beizhedenglong/react-hooks-lib.git"

src/hooks/useEqualEffect.js

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react'
+import shallowEqual from 'shallowequal'
+import deepEqual from 'lodash.isequal'
+
+const isShallowEqual = (depsA = [], depsB = []) => {
+  if (depsA.length !== depsB.length) {
+    return false
+  }
+  return depsA.every((a, index) => shallowEqual(a, depsB[index]))
+}
+
+const useEqualEffect = (compareFn, f, deps) => {
+  const ref = useRef([])
+  if (!compareFn(ref.current, deps)) {
+    ref.current = deps
+  }
+  useEffect(f, ref.current)
+}
+
+export const useShallowEqualEffect = (f, deps) => {
+  useEqualEffect(isShallowEqual, f, deps)
+}
+
+export const useDeepEqualEffect = (f, deps) => {
+  useEqualEffect(deepEqual, f, deps)
+}

src/index.js

@@ -33,3 +33,5 @@ export { default as createGlobalState, createContextState } from './hooks/useGlo
 export { default as useUndo } from './hooks/useUndo'
 
 export { default as useStateCallback } from './hooks/useStateCallback'
+
+export { useShallowEqualEffect, useDeepEqualEffect } from './hooks/useEqualEffect'

stories/effect.stories.js

@@ -0,0 +1,36 @@
+import { storiesOf } from '@storybook/react'
+
+const section = name => `Effect|${name}`
+
+storiesOf(section('useDeepEqualEffect & useShallowEqualEffect'), module)
+  .addLiveSource('demo', `
+ const Example = () => {
+   const { count, inc } = useCounter(0)
+   React.useEffect(() => {
+     // will be called on every render
+     console.log("useEffect")
+   }, [{ name: 'victor' }])
+
+  useShallowEqualEffect(() => {
+    // only be called on first render
+    console.log("useShallowEqualEffect1")
+  }, [{ name: 'victor' }])
+
+  useShallowEqualEffect(() => {
+    // will be called on every render
+     console.log("useShallowEqualEffect2")
+  }, [{ a: { b: 1 } }])
+
+  useDeepEqualEffect(() => {
+    // only be called on first render
+    console.log("useDeepEqualEffect")
+  }, [{ a: { b: 1 } }])
+   return (
+     <div>
+        count: {count}
+       <button onClick={() => inc(1)}>+1</button>
+     </div>
+   )
+ }
+  return <Example />
+`)