Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Codemod act -> await act (3/?) #26336

Merged
merged 1 commit into from
Mar 7, 2023
Merged

Codemod act -> await act (3/?) #26336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Codemod act -> await act (3/?) 
Similar to the rationale for `waitFor` (see #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
commit 6fe44c23e321319d77c634eade68d60e59658477
70 changes: 35 additions & 35 deletions packages/react-reconciler/src/__tests__/StrictEffectsMode-test.js
View file
Open in desktop
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