Skip to content

Commit 161f6ae

Browse files
acdliteacdlite
authored
Codemod act -> await act (3/?) (#26336)
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.
1 parent 58605f7 commit 161f6ae

File tree

11 files changed

+179
-163
lines changed

11 files changed

+179
-163
lines changed

‎packages/react-reconciler/src/__tests__/StrictEffectsMode-test.js

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ describe('StrictEffectsMode', () => {
3636
);
3737
}
3838

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

54-
act(() => {
54+
await act(async () => {
5555
ReactTestRenderer.create(<App text={'mount'} />);
5656
});
5757

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

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

7676
let renderer;
77-
act(() => {
77+
await act(async () => {
7878
renderer = ReactTestRenderer.create(<App text={'mount'} />, {
7979
unstable_isConcurrent: true,
8080
});
@@ -93,7 +93,7 @@ describe('StrictEffectsMode', () => {
9393
assertLog(['useLayoutEffect mount', 'useEffect mount']);
9494
}
9595

96-
act(() => {
96+
await act(async () => {
9797
renderer.update(<App text={'update'} />);
9898
});
9999

@@ -104,14 +104,14 @@ describe('StrictEffectsMode', () => {
104104
'useEffect mount',
105105
]);
106106

107-
act(() => {
107+
await act(async () => {
108108
renderer.unmount();
109109
});
110110

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

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

129129
let renderer;
130-
act(() => {
130+
await act(async () => {
131131
renderer = ReactTestRenderer.create(<App text={'mount'} />, {
132132
unstable_isConcurrent: true,
133133
});
@@ -146,7 +146,7 @@ describe('StrictEffectsMode', () => {
146146
assertLog(['useEffect One mount', 'useEffect Two mount']);
147147
}
148148

149-
act(() => {
149+
await act(async () => {
150150
renderer.update(<App text={'update'} />);
151151
});
152152

@@ -157,14 +157,14 @@ describe('StrictEffectsMode', () => {
157157
'useEffect Two mount',
158158
]);
159159

160-
act(() => {
160+
await act(async () => {
161161
renderer.unmount(null);
162162
});
163163

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

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

182182
let renderer;
183-
act(() => {
183+
await act(async () => {
184184
renderer = ReactTestRenderer.create(<App text={'mount'} />, {
185185
unstable_isConcurrent: true,
186186
});
@@ -199,7 +199,7 @@ describe('StrictEffectsMode', () => {
199199
assertLog(['useLayoutEffect One mount', 'useLayoutEffect Two mount']);
200200
}
201201

202-
act(() => {
202+
await act(async () => {
203203
renderer.update(<App text={'update'} />);
204204
});
205205

@@ -210,14 +210,14 @@ describe('StrictEffectsMode', () => {
210210
'useLayoutEffect Two mount',
211211
]);
212212

213-
act(() => {
213+
await act(async () => {
214214
renderer.unmount();
215215
});
216216

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

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

233233
let renderer;
234-
act(() => {
234+
await act(async () => {
235235
renderer = ReactTestRenderer.create(<App text={'mount'} />, {
236236
unstable_isConcurrent: true,
237237
});
@@ -248,20 +248,20 @@ describe('StrictEffectsMode', () => {
248248
assertLog(['useLayoutEffect mount', 'useEffect mount']);
249249
}
250250

251-
act(() => {
251+
await act(async () => {
252252
renderer.update(<App text={'update'} />);
253253
});
254254

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

257-
act(() => {
257+
await act(async () => {
258258
renderer.unmount();
259259
});
260260

261261
assertLog([]);
262262
});
263263

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

@@ -285,7 +285,7 @@ describe('StrictEffectsMode', () => {
285285
}
286286
}
287287

288-
act(() => {
288+
await act(async () => {
289289
ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
290290
});
291291

@@ -300,7 +300,7 @@ describe('StrictEffectsMode', () => {
300300
}
301301
});
302302

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

322322
let renderer;
323-
act(() => {
323+
await act(async () => {
324324
renderer = ReactTestRenderer.create(<App text={'mount'} />, {
325325
unstable_isConcurrent: true,
326326
});
@@ -336,20 +336,20 @@ describe('StrictEffectsMode', () => {
336336
assertLog(['componentDidMount']);
337337
}
338338

339-
act(() => {
339+
await act(async () => {
340340
renderer.update(<App text={'update'} />);
341341
});
342342

343343
assertLog(['componentDidUpdate']);
344344

345-
act(() => {
345+
await act(async () => {
346346
renderer.unmount();
347347
});
348348

349349
assertLog(['componentWillUnmount']);
350350
});
351351

352-
it('should not double invoke class lifecycles in legacy mode', () => {
352+
it('should not double invoke class lifecycles in legacy mode', async () => {
353353
class App extends React.PureComponent {
354354
componentDidMount() {
355355
Scheduler.log('componentDidMount');
@@ -368,14 +368,14 @@ describe('StrictEffectsMode', () => {
368368
}
369369
}
370370

371-
act(() => {
371+
await act(async () => {
372372
ReactTestRenderer.create(<App text={'mount'} />);
373373
});
374374

375375
assertLog(['componentDidMount']);
376376
});
377377

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

398-
act(() => {
398+
await act(async () => {
399399
ReactTestRenderer.create(<App text={'mount'} />, {
400400
unstable_isConcurrent: true,
401401
});
@@ -430,7 +430,7 @@ describe('StrictEffectsMode', () => {
430430
}
431431
});
432432

433-
it('newly mounted components after initial mount get double invoked', () => {
433+
it('newly mounted components after initial mount get double invoked', async () => {
434434
let _setShowChild;
435435
function Child() {
436436
React.useEffect(() => {
@@ -460,7 +460,7 @@ describe('StrictEffectsMode', () => {
460460
return showChild && <Child />;
461461
}
462462

463-
act(() => {
463+
await act(async () => {
464464
ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
465465
});
466466

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

480-
act(() => {
480+
await act(async () => {
481481
_setShowChild(true);
482482
});
483483

@@ -506,7 +506,7 @@ describe('StrictEffectsMode', () => {
506506
}
507507
});
508508

509-
it('classes and functions are double invoked together correctly', () => {
509+
it('classes and functions are double invoked together correctly', async () => {
510510
class ClassChild extends React.PureComponent {
511511
componentDidMount() {
512512
Scheduler.log('componentDidMount');
@@ -543,7 +543,7 @@ describe('StrictEffectsMode', () => {
543543
}
544544

545545
let renderer;
546-
act(() => {
546+
await act(async () => {
547547
renderer = ReactTestRenderer.create(<App text={'mount'} />, {
548548
unstable_isConcurrent: true,
549549
});
@@ -569,7 +569,7 @@ describe('StrictEffectsMode', () => {
569569
]);
570570
}
571571

572-
act(() => {
572+
await act(async () => {
573573
renderer.update(<App text={'mount'} />);
574574
});
575575

@@ -580,7 +580,7 @@ describe('StrictEffectsMode', () => {
580580
'useEffect mount',
581581
]);
582582

583-
act(() => {
583+
await act(async () => {
584584
renderer.unmount();
585585
});
586586

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy