Merge pull request #22 from LeetCode-OpenSource/replace-useMemo-with-useEffect

fix the wrong usages of useMemo

Author: zry656565

package.json

@@ -33,9 +33,9 @@
     "jest": "^23.6.0",
     "lint-staged": "^8.0.5",
     "prettier": "^1.15.2",
-    "react": "16.7.0-alpha.2",
-    "react-dom": "16.7.0-alpha.2",
-    "react-test-renderer": "^16.7.0-alpha.2",
+    "react": "16.8.0-alpha.1",
+    "react-dom": "16.8.0-alpha.1",
+    "react-test-renderer": "16.8.0-alpha.1",
     "rxjs": "^6.3.3",
     "sinon": "^7.1.1",
     "source-map-loader": "^0.2.4",

src/__test__/use-event-callback.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Observable, of, Observer } from 'rxjs'
-import { mapTo, delay, withLatestFrom, map } from 'rxjs/operators'
+import { mapTo, delay, withLatestFrom, combineLatest, map } from 'rxjs/operators'
 import { create } from 'react-test-renderer'
 import * as Sinon from 'sinon'
 
@@ -138,7 +138,7 @@ describe('useEventCallback specs', () => {
       _state$: Observable<number>,
     ) =>
       event$.pipe(
-        withLatestFrom(inputs$),
+        combineLatest(inputs$),
         map(([_, [count]]) => {
           return value + count
         }),
@@ -167,6 +167,7 @@ describe('useEventCallback specs', () => {
     button.props.onClick()
     timer.tick(timeToDelay)
     testRenderer.update(<Fixture count={4} />)
+    timer.tick(timeToDelay)
     expect(find(testRenderer.root, 'h1').children).toEqual([`${value + 4}`])
     timer.restore()
   })

src/__test__/use-observable.spec.tsx

@@ -117,9 +117,11 @@ describe('useObservable specs', () => {
   })
 
   it('should emit changed props in observableFactory', () => {
+    const timer = Sinon.useFakeTimers()
     const spy = Sinon.spy()
+    const timeToDelay = 200
     function Fixture(props: { foo: number; bar: string; baz: any }) {
-      const value = useObservable((inputs$: Observable<[number, any]>) => inputs$.pipe(tap(spy)), null, [
+      const value = useObservable((inputs$: Observable<[number, any] | null>) => inputs$.pipe(tap(spy)), null, [
         props.foo,
         props.baz,
       ] as any)
@@ -145,13 +147,17 @@ describe('useObservable specs', () => {
     expect(find(testRenderer.root, 'div').children).toEqual([])
     const newProps = { ...props, bar: 'new bar' }
     testRenderer.update(<Fixture {...newProps} />)
+    // wait useEffect fired
+    // https://reactjs.org/docs/hooks-reference.html#timing-of-effects
+    timer.tick(timeToDelay)
     expect(spy.callCount).toBe(1)
     expect(spy.args[0]).toEqual([[newProps.foo, newProps.baz]])
     expect(find(testRenderer.root, 'h1').children).toEqual([`${newProps.foo}`])
     expect(find(testRenderer.root, 'div').children).toEqual([`${newProps.baz.foo}`])
 
     const renewProps = { ...props, foo: 1000 }
     testRenderer.update(<Fixture {...renewProps} />)
+    timer.tick(timeToDelay)
 
     expect(spy.callCount).toBe(2)
     expect(spy.args[1]).toEqual([[renewProps.foo, renewProps.baz]])

src/use-event-callback.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Observable, BehaviorSubject, Subject, noop } from 'rxjs'
 
 import { RestrictArray, VoidAsNull } from './type'
@@ -46,9 +46,9 @@ export function useEventCallback<EventValue, State = void, Inputs = void>(
   const [state$] = useState(stateSubject$)
   const [inputs$] = useState(inputSubject$)
 
-  useMemo(() => {
+  useEffect(() => {
     inputs$.next(inputs!)
-  }, ((inputs as unknown) as ReadonlyArray<any>) || [])
+  }, inputs || [])
 
   useEffect(
     () => {

src/use-observable.ts

@@ -32,7 +32,7 @@ export function useObservable<State, Inputs extends ReadonlyArray<any>>(
     }
   }, [])
 
-  useMemo(() => {
+  useEffect(() => {
     inputs$.next(inputs)
   }, inputs || [])
 

yarn.lock

@@ -5634,40 +5634,40 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@16.7.0-alpha.2:
-  version "16.7.0-alpha.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0-alpha.2.tgz#16632880ed43676315991d8b412cce6975a30282"
-  integrity sha512-o0mMw8jBlwHjGZEy/vvKd/6giAX0+skREMOTs3/QHmgi+yAhUClp4My4Z9lsKy3SXV+03uPdm1l/QM7NTcGuMw==
+react-dom@16.8.0-alpha.1:
+  version "16.8.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.0-alpha.1.tgz#dab73b8354ba2e498e3127d18e29d4546cea889e"
+  integrity sha512-tZCUM8BpnwUHJmLnUWP9c3vVZxnCqYotj7s4tx7umojG6BKv745KIBtuPTzt0EI0q50GMLEpmT/CPQ8iA61TwQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.12.0-alpha.2"
+    scheduler "^0.13.0-alpha.1"
 
-react-is@^16.7.0-alpha.2:
-  version "16.7.0-alpha.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0-alpha.2.tgz#0dd7f95d45ad5318b7f7bcb99dcb84da9385cb57"
-  integrity sha512-1Q3qN8nMWUfFcRz/bBC1f9zSL3il9OcSxMd9CNnpJbeFf4VCX0qYxL3TuwT4f+tFk1TkidwIL11yYgk4HjldYg==
+react-is@^16.8.0-alpha.1:
+  version "16.8.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.0-alpha.1.tgz#ac1aed207d6040f002b645af36702edf9ce2c40d"
+  integrity sha512-Gsh2u4ovhS2DY6fWgie/av5vzrIfW6P0lgWAsAQp9DjOImE0fJ26FfEdpFXtYBwi5s2krT9z0xvcQKvQsi4ekw==
 
-react-test-renderer@^16.7.0-alpha.2:
-  version "16.7.0-alpha.2"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.7.0-alpha.2.tgz#8606a5a82240c405539da0401d7b3572898b5611"
-  integrity sha512-taA9MrHMi7hEM/cKgvcvht+9cszhPirCaSP99yxkVQ2JwQxYSltGYq2gFf/UQBqGJMgmgEghN62rxziaL1EK+A==
+react-test-renderer@16.8.0-alpha.1:
+  version "16.8.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.0-alpha.1.tgz#65f09023aeb83cbb1716f2364fed61c0017cd2ba"
+  integrity sha512-ayhWv47RYZuZ/vY/Asmf2qLgphHtwsq32Y7uNztyO4HcdFh6HrieDioYwbObfxl3+Uf3r4UezJ7uxqT5NndsHw==
   dependencies:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    react-is "^16.7.0-alpha.2"
-    scheduler "^0.12.0-alpha.2"
+    react-is "^16.8.0-alpha.1"
+    scheduler "^0.13.0-alpha.1"
 
-react@16.7.0-alpha.2:
-  version "16.7.0-alpha.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.7.0-alpha.2.tgz#924f2ae843a46ea82d104a8def7a599fbf2c78ce"
-  integrity sha512-Xh1CC8KkqIojhC+LFXd21jxlVtzoVYdGnQAi/I2+dxbmos9ghbx5TQf9/nDxc4WxaFfUQJkya0w1k6rMeyIaxQ==
+react@16.8.0-alpha.1:
+  version "16.8.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.0-alpha.1.tgz#c2b32689f3b466d3ce85a634dd9035f789d2cd97"
+  integrity sha512-vLwwnhM2dXrCsiQmcSxF2UdZVV5xsiXjK5Yetmy8dVqngJhQ3aw3YJhZN/YmyonxwdimH40wVqFQfsl4gSu2RA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.12.0-alpha.2"
+    scheduler "^0.13.0-alpha.1"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
@@ -6022,10 +6022,10 @@ sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.12.0-alpha.2:
-  version "0.12.0-alpha.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.12.0-alpha.2.tgz#2a8bc8dc6ecdb75fa6480ceeedc1f187c9539970"
-  integrity sha512-bfqFzGH18MjjhePIzYQNR0uGQ1wMCX6Q83c2s+3fzyuqKT6zBI2wNQTpq01q72C7QItAp8if5w2LfMiXnI2SYw==
+scheduler@^0.13.0-alpha.1:
+  version "0.13.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.0-alpha.1.tgz#753977fb4fb35d8cdd559868a11e46b640955556"
+  integrity sha512-W0sH0848sVuPKg+I18vTYQyzVtA4X1lrVgSeXK6KnOPUltFdJcY5nkbTkjGUeS/E0x+eBsNYfSdhJtGjT95njw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"