diff --git a/package.json b/package.json index 2c79f950..e11c1bf9 100644 --- a/package.json +++ b/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", diff --git a/src/__test__/use-event-callback.spec.tsx b/src/__test__/use-event-callback.spec.tsx index 56e2e662..0992d565 100644 --- a/src/__test__/use-event-callback.spec.tsx +++ b/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, ) => 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() + timer.tick(timeToDelay) expect(find(testRenderer.root, 'h1').children).toEqual([`${value + 4}`]) timer.restore() }) diff --git a/src/__test__/use-observable.spec.tsx b/src/__test__/use-observable.spec.tsx index ec5a313c..187db751 100644 --- a/src/__test__/use-observable.spec.tsx +++ b/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,6 +147,9 @@ describe('useObservable specs', () => { expect(find(testRenderer.root, 'div').children).toEqual([]) const newProps = { ...props, bar: 'new bar' } testRenderer.update() + // 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}`]) @@ -152,6 +157,7 @@ describe('useObservable specs', () => { const renewProps = { ...props, foo: 1000 } testRenderer.update() + timer.tick(timeToDelay) expect(spy.callCount).toBe(2) expect(spy.args[1]).toEqual([[renewProps.foo, renewProps.baz]]) diff --git a/src/use-event-callback.ts b/src/use-event-callback.ts index 56c71a52..b58b5a9d 100644 --- a/src/use-event-callback.ts +++ b/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( const [state$] = useState(stateSubject$) const [inputs$] = useState(inputSubject$) - useMemo(() => { + useEffect(() => { inputs$.next(inputs!) - }, ((inputs as unknown) as ReadonlyArray) || []) + }, inputs || []) useEffect( () => { diff --git a/src/use-observable.ts b/src/use-observable.ts index 12facd45..303e895e 100644 --- a/src/use-observable.ts +++ b/src/use-observable.ts @@ -32,7 +32,7 @@ export function useObservable>( } }, []) - useMemo(() => { + useEffect(() => { inputs$.next(inputs) }, inputs || []) diff --git a/yarn.lock b/yarn.lock index 49cb6de6..f08c6b8e 100644 --- a/yarn.lock +++ b/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"