Skip to content

Commit

Permalink
Codemod act -> await act (3/?)
Browse files Browse the repository at this point in the history 
Similar to the rationale for `waitFor` (see facebook#26285), we should always
await the result of an `act` call so that microtasks have a chance to
fire.

This only affects the internal `act` that we use in our repo, for now.
In the public `act` API, we don't yet require this; however, we
effectively will for any update that triggers suspense once `use` lands.
So we likely will start warning in an upcoming minor.
  • Loading branch information
@acdlite
acdlite committed Mar 7, 2023
1 parent 58605f7 commit f141aed
Show file tree
Hide file tree
Showing 11 changed files with 171 additions and 164 deletions.
70 changes: 35 additions & 35 deletions packages/react-reconciler/src/__tests__/StrictEffectsMode-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ describe('StrictEffectsMode', () => {
);
}

it('should not double invoke effects in legacy mode', () => {
it('should not double invoke effects in legacy mode', async () => {
function App({text}) {
React.useEffect(() => {
Scheduler.log('useEffect mount');
Expand All @@ -51,14 +51,14 @@ describe('StrictEffectsMode', () => {
return text;
}

act(() => {
await act(async () => {
ReactTestRenderer.create(<App text={'mount'} />);
});

assertLog(['useLayoutEffect mount', 'useEffect mount']);
});

it('double invoking for effects works properly', () => {
it('double invoking for effects works properly', async () => {
function App({text}) {
React.useEffect(() => {
Scheduler.log('useEffect mount');
Expand All @@ -74,7 +74,7 @@ describe('StrictEffectsMode', () => {
}

let renderer;
act(() => {
await act(async () => {
renderer = ReactTestRenderer.create(<App text={'mount'} />, {
unstable_isConcurrent: true,
});
Expand All @@ -93,7 +93,7 @@ describe('StrictEffectsMode', () => {
assertLog(['useLayoutEffect mount', 'useEffect mount']);
}

act(() => {
await act(async () => {
renderer.update(<App text={'update'} />);
});

Expand All @@ -104,14 +104,14 @@ describe('StrictEffectsMode', () => {
'useEffect mount',
]);

act(() => {
await act(async () => {
renderer.unmount();
});

assertLog(['useLayoutEffect unmount', 'useEffect unmount']);
});

it('multiple effects are double invoked in the right order (all mounted, all unmounted, all remounted)', () => {
it('multiple effects are double invoked in the right order (all mounted, all unmounted, all remounted)', async () => {
function App({text}) {
React.useEffect(() => {
Scheduler.log('useEffect One mount');
Expand All @@ -127,7 +127,7 @@ describe('StrictEffectsMode', () => {
}

let renderer;
act(() => {
await act(async () => {
renderer = ReactTestRenderer.create(<App text={'mount'} />, {
unstable_isConcurrent: true,
});
Expand All @@ -146,7 +146,7 @@ describe('StrictEffectsMode', () => {
assertLog(['useEffect One mount', 'useEffect Two mount']);
}

act(() => {
await act(async () => {
renderer.update(<App text={'update'} />);
});

Expand All @@ -157,14 +157,14 @@ describe('StrictEffectsMode', () => {
'useEffect Two mount',
]);

act(() => {
await act(async () => {
renderer.unmount(null);
});

assertLog(['useEffect One unmount', 'useEffect Two unmount']);
});

it('multiple layout effects are double invoked in the right order (all mounted, all unmounted, all remounted)', () => {
it('multiple layout effects are double invoked in the right order (all mounted, all unmounted, all remounted)', async () => {
function App({text}) {
React.useLayoutEffect(() => {
Scheduler.log('useLayoutEffect One mount');
Expand All @@ -180,7 +180,7 @@ describe('StrictEffectsMode', () => {
}

let renderer;
act(() => {
await act(async () => {
renderer = ReactTestRenderer.create(<App text={'mount'} />, {
unstable_isConcurrent: true,
});
Expand All @@ -199,7 +199,7 @@ describe('StrictEffectsMode', () => {
assertLog(['useLayoutEffect One mount', 'useLayoutEffect Two mount']);
}

act(() => {
await act(async () => {
renderer.update(<App text={'update'} />);
});

Expand All @@ -210,14 +210,14 @@ describe('StrictEffectsMode', () => {
'useLayoutEffect Two mount',
]);

act(() => {
await act(async () => {
renderer.unmount();
});

assertLog(['useLayoutEffect One unmount', 'useLayoutEffect Two unmount']);
});

it('useEffect and useLayoutEffect is called twice when there is no unmount', () => {
it('useEffect and useLayoutEffect is called twice when there is no unmount', async () => {
function App({text}) {
React.useEffect(() => {
Scheduler.log('useEffect mount');
Expand All @@ -231,7 +231,7 @@ describe('StrictEffectsMode', () => {
}

let renderer;
act(() => {
await act(async () => {
renderer = ReactTestRenderer.create(<App text={'mount'} />, {
unstable_isConcurrent: true,
});
Expand All @@ -248,20 +248,20 @@ describe('StrictEffectsMode', () => {
assertLog(['useLayoutEffect mount', 'useEffect mount']);
}

act(() => {
await act(async () => {
renderer.update(<App text={'update'} />);
});

assertLog(['useLayoutEffect mount', 'useEffect mount']);

act(() => {
await act(async () => {
renderer.unmount();
});

assertLog([]);
});

it('passes the right context to class component lifecycles', () => {
it('passes the right context to class component lifecycles', async () => {
class App extends React.PureComponent {
test() {}

Expand All @@ -285,7 +285,7 @@ describe('StrictEffectsMode', () => {
}
}

act(() => {
await act(async () => {
ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
});

Expand All @@ -300,7 +300,7 @@ describe('StrictEffectsMode', () => {
}
});

it('double invoking works for class components', () => {
it('double invoking works for class components', async () => {
class App extends React.PureComponent {
componentDidMount() {
Scheduler.log('componentDidMount');
Expand All @@ -320,7 +320,7 @@ describe('StrictEffectsMode', () => {
}

let renderer;
act(() => {
await act(async () => {
renderer = ReactTestRenderer.create(<App text={'mount'} />, {
unstable_isConcurrent: true,
});
Expand All @@ -336,20 +336,20 @@ describe('StrictEffectsMode', () => {
assertLog(['componentDidMount']);
}

act(() => {
await act(async () => {
renderer.update(<App text={'update'} />);
});

assertLog(['componentDidUpdate']);

act(() => {
await act(async () => {
renderer.unmount();
});

assertLog(['componentWillUnmount']);
});

it('should not double invoke class lifecycles in legacy mode', () => {
it('should not double invoke class lifecycles in legacy mode', async () => {
class App extends React.PureComponent {
componentDidMount() {
Scheduler.log('componentDidMount');
Expand All @@ -368,14 +368,14 @@ describe('StrictEffectsMode', () => {
}
}

act(() => {
await act(async () => {
ReactTestRenderer.create(<App text={'mount'} />);
});

assertLog(['componentDidMount']);
});

it('double flushing passive effects only results in one double invoke', () => {
it('double flushing passive effects only results in one double invoke', async () => {
function App({text}) {
const [state, setState] = React.useState(0);
React.useEffect(() => {
Expand All @@ -395,7 +395,7 @@ describe('StrictEffectsMode', () => {
return text;
}

act(() => {
await act(async () => {
ReactTestRenderer.create(<App text={'mount'} />, {
unstable_isConcurrent: true,
});
Expand Down Expand Up @@ -430,7 +430,7 @@ describe('StrictEffectsMode', () => {
}
});

it('newly mounted components after initial mount get double invoked', () => {
it('newly mounted components after initial mount get double invoked', async () => {
let _setShowChild;
function Child() {
React.useEffect(() => {
Expand Down Expand Up @@ -460,7 +460,7 @@ describe('StrictEffectsMode', () => {
return showChild && <Child />;
}

act(() => {
await act(async () => {
ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
});

Expand All @@ -477,7 +477,7 @@ describe('StrictEffectsMode', () => {
assertLog(['App useLayoutEffect mount', 'App useEffect mount']);
}

act(() => {
await act(async () => {
_setShowChild(true);
});

Expand Down Expand Up @@ -506,7 +506,7 @@ describe('StrictEffectsMode', () => {
}
});

it('classes and functions are double invoked together correctly', () => {
it('classes and functions are double invoked together correctly', async () => {
class ClassChild extends React.PureComponent {
componentDidMount() {
Scheduler.log('componentDidMount');
Expand Down Expand Up @@ -543,7 +543,7 @@ describe('StrictEffectsMode', () => {
}

let renderer;
act(() => {
await act(async () => {
renderer = ReactTestRenderer.create(<App text={'mount'} />, {
unstable_isConcurrent: true,
});
Expand All @@ -569,7 +569,7 @@ describe('StrictEffectsMode', () => {
]);
}

act(() => {
await act(async () => {
renderer.update(<App text={'mount'} />);
});

Expand All @@ -580,7 +580,7 @@ describe('StrictEffectsMode', () => {
'useEffect mount',
]);

act(() => {
await act(async () => {
renderer.unmount();
});

Expand Down
Loading

0 comments on commit f141aed

Please sign in to comment.