Flush all passive destroy fns before calling create fns #17947
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -1558,6 +1558,67 @@ describe('ReactHooksWithNoopRenderer', () => { | |
| ]); | ||
| }); | ||
|
|
||
| it('unmounts all previous effects between siblings before creating any new ones', () => { | ||
| function Counter({count, label}) { | ||
| useEffect(() => { | ||
| Scheduler.unstable_yieldValue(`Mount ${label} [${count}]`); | ||
| return () => { | ||
| Scheduler.unstable_yieldValue(`Unmount ${label} [${count}]`); | ||
| }; | ||
| }); | ||
| return <Text text={`${label} ${count}`} />; | ||
| } | ||
| act(() => { | ||
| ReactNoop.render( | ||
| <React.Fragment> | ||
| <Counter label="A" count={0} /> | ||
| <Counter label="B" count={0} /> | ||
| </React.Fragment>, | ||
| () => Scheduler.unstable_yieldValue('Sync effect'), | ||
| ); | ||
| expect(Scheduler).toFlushAndYieldThrough(['A 0', 'B 0', 'Sync effect']); | ||
| expect(ReactNoop.getChildren()).toEqual([span('A 0'), span('B 0')]); | ||
| }); | ||
|
|
||
| expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']); | ||
|
|
||
| act(() => { | ||
| ReactNoop.render( | ||
| <React.Fragment> | ||
| <Counter label="A" count={1} /> | ||
| <Counter label="B" count={1} /> | ||
| </React.Fragment>, | ||
| () => Scheduler.unstable_yieldValue('Sync effect'), | ||
| ); | ||
| expect(Scheduler).toFlushAndYieldThrough(['A 1', 'B 1', 'Sync effect']); | ||
| expect(ReactNoop.getChildren()).toEqual([span('A 1'), span('B 1')]); | ||
| }); | ||
| expect(Scheduler).toHaveYielded([ | ||
| 'Unmount A [0]', | ||
| 'Unmount B [0]', | ||
| 'Mount A [1]', | ||
| 'Mount B [1]', | ||
| ]); | ||
|
|
||
| act(() => { | ||
| ReactNoop.render( | ||
| <React.Fragment> | ||
| <Counter label="B" count={2} /> | ||
| <Counter label="C" count={0} /> | ||
| </React.Fragment>, | ||
| () => Scheduler.unstable_yieldValue('Sync effect'), | ||
| ); | ||
| expect(Scheduler).toFlushAndYieldThrough(['B 2', 'C 0', 'Sync effect']); | ||
| expect(ReactNoop.getChildren()).toEqual([span('B 2'), span('C 0')]); | ||
| }); | ||
| expect(Scheduler).toHaveYielded([ | ||
| 'Unmount A [1]', | ||
| 'Unmount B [1]', | ||
| 'Mount B [2]', | ||
| 'Mount C [0]', | ||
| ]); | ||
| }); | ||
|
|
||
| it('handles errors on mount', () => { | ||
| function Counter(props) { | ||
| useEffect(() => { | ||
|
|
@@ -1656,8 +1717,6 @@ describe('ReactHooksWithNoopRenderer', () => { | |
| return () => { | ||
| Scheduler.unstable_yieldValue('Oops!'); | ||
| throw new Error('Oops!'); | ||
| }; | ||
| }); | ||
| useEffect(() => { | ||
|
|
@@ -1668,6 +1727,7 @@ describe('ReactHooksWithNoopRenderer', () => { | |
| }); | ||
| return <Text text={'Count: ' + props.count} />; | ||
| } | ||
|
|
||
| act(() => { | ||
| ReactNoop.render(<Counter count={0} />, () => | ||
| Scheduler.unstable_yieldValue('Sync effect'), | ||
|
|
@@ -1679,18 +1739,30 @@ describe('ReactHooksWithNoopRenderer', () => { | |
| }); | ||
|
|
||
| act(() => { | ||
| // This update will trigger an error during passive effect unmount | ||
| ReactNoop.render(<Counter count={1} />, () => | ||
| Scheduler.unstable_yieldValue('Sync effect'), | ||
| ); | ||
| expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']); | ||
| expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]); | ||
| expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops'); | ||
|
|
||
| // This tests enables a feature flag that flushes all passive destroys in a | ||
| // separate pass before flushing any passive creates. | ||
| // A result of this two-pass flush is that an error thrown from unmount does | ||
| // not block the subsequent create functions from being run. | ||
| expect(Scheduler).toHaveYielded([ | ||
| 'Oops!', | ||
| 'Unmount B [0]', | ||
|
There was a problem hiding this comment. This is the main positive change wrt 41e0752. |
||
| 'Mount A [1]', | ||
| 'Mount B [1]', | ||
| ]); | ||
| }); | ||
|
|
||
| // <Counter> gets unmounted because an error is thrown above. | ||
| // The remaining destroy functions are run later on unmount, since they're passive. | ||
| // In this case, one of them throws again (because of how the test is written). | ||
| expect(Scheduler).toHaveYielded(['Oops!', 'Unmount B [1]']); | ||
| expect(ReactNoop.getChildren()).toEqual([]); | ||
| }); | ||
|
|
||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Retaining both the effect and Fiber is kind of gross, particularly in the same array. I think we'd need to track them both somewhere though because of how we track and report errors.