Fix bug in cloneHook (#14364)
* Fixes #14360 and adds a test for mixed priority dispatches. It was broken because `cloneHook` assigned `memoizedState` instead of `baseState` from the original hook to `baseState` of the clone. * tweak comments
Imre Osswald committed
Nov 30, 2018 at 16:02 UTC
f1bf281605444b342f4c37718092accbe3f98702
2 files changed
+34
-1
packages/react-reconciler/src/ReactFiberHooks.js
+1
-1
@@ -253,7 +253,7 @@ function cloneHook(hook: Hook): Hook {
253
return {
254
memoizedState: hook.memoizedState,
255
256
- baseState: hook.memoizedState,
256
+ baseState: hook.baseState,
257
queue: hook.queue,
258
baseUpdate: hook.baseUpdate,
259
packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js
+33
@@ -565,6 +565,39 @@ describe('ReactHooksWithNoopRenderer', () => {
565
ReactNoop.flush();
566
expect(ReactNoop.getChildren()).toEqual([span('Count: 8')]);
567
});
568
+
569
+ // Regression test for https://github.com/facebook/react/issues/14360
570
+ it('handles dispatches with mixed priorities', () => {
571
+ const INCREMENT = 'INCREMENT';
572
+
573
+ function reducer(state, action) {
574
+ return action === INCREMENT ? state + 1 : state;
575
+ }
576
+
577
+ function Counter(props, ref) {
578
+ const [count, dispatch] = useReducer(reducer, 0);
579
+ useImperativeMethods(ref, () => ({dispatch}));
580
+ return <Text text={'Count: ' + count} />;
581
+ }
582
+
583
+ Counter = forwardRef(Counter);
584
+ const counter = React.createRef(null);
585
+ ReactNoop.render(<Counter ref={counter} />);
586
+
587
+ ReactNoop.flush();
588
+ expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
589
+
590
+ counter.current.dispatch(INCREMENT);
591
+ counter.current.dispatch(INCREMENT);
592
+ counter.current.dispatch(INCREMENT);
593
+ ReactNoop.flushSync(() => {
594
+ counter.current.dispatch(INCREMENT);
595
+ });
596
+ expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
597
+
598
+ ReactNoop.flush();
599
+ expect(ReactNoop.getChildren()).toEqual([span('Count: 4')]);
600
+ });
601
});
602
603
describe('useEffect', () => {