@@ -949,6 +949,29 @@ const tests = {
949
949
}
950
950
` ,
951
951
} ,
952
+ {
953
+ code : `
954
+ function App() {
955
+ const [query, setQuery] = useState('react');
956
+ const [state, setState] = useState(null);
957
+ useEffect(() => {
958
+ let ignore = false;
959
+ fetchSomething();
960
+ async function fetchSomething() {
961
+ const result = await (await fetch('http://hn.algolia.com/api/v1/search?query=' + query)).json();
962
+ if (!ignore) setState(result);
963
+ }
964
+ return () => { ignore = true; };
965
+ }, [query]);
966
+ return (
967
+ <>
968
+ <input value={query} onChange={e => setQuery(e.target.value)} />
969
+ {JSON.stringify(state)}
970
+ </>
971
+ );
972
+ }
973
+ ` ,
974
+ } ,
952
975
] ,
953
976
invalid : [
954
977
{
@@ -2304,7 +2327,7 @@ const tests = {
2304
2327
errors : [
2305
2328
"React Hook useEffect has a missing dependency: 'state'. " +
2306
2329
'Either include it or remove the dependency array. ' +
2307
- `You can also write 'setState(state => ...)' ` +
2330
+ `You can also write 'setState(s => ...)' ` +
2308
2331
`if you only use 'state' for the 'setState' call.` ,
2309
2332
] ,
2310
2333
} ,
@@ -2335,7 +2358,7 @@ const tests = {
2335
2358
errors : [
2336
2359
"React Hook useEffect has a missing dependency: 'state'. " +
2337
2360
'Either include it or remove the dependency array. ' +
2338
- `You can also write 'setState(state => ...)' ` +
2361
+ `You can also write 'setState(s => ...)' ` +
2339
2362
`if you only use 'state' for the 'setState' call.` ,
2340
2363
] ,
2341
2364
} ,
@@ -3933,7 +3956,7 @@ const tests = {
3933
3956
errors : [
3934
3957
"React Hook useEffect has a missing dependency: 'count'. " +
3935
3958
'Either include it or remove the dependency array. ' +
3936
- `You can also write 'setCount(count => ...)' if you ` +
3959
+ `You can also write 'setCount(c => ...)' if you ` +
3937
3960
`only use 'count' for the 'setCount' call.` ,
3938
3961
] ,
3939
3962
} ,
@@ -3971,7 +3994,7 @@ const tests = {
3971
3994
errors : [
3972
3995
"React Hook useEffect has missing dependencies: 'count' and 'increment'. " +
3973
3996
'Either include them or remove the dependency array. ' +
3974
- `You can also write 'setCount(count => ...)' if you ` +
3997
+ `You can also write 'setCount(c => ...)' if you ` +
3975
3998
`only use 'count' for the 'setCount' call.` ,
3976
3999
] ,
3977
4000
} ,
@@ -4379,6 +4402,35 @@ const tests = {
4379
4402
`Either exclude it or remove the dependency array.` ,
4380
4403
] ,
4381
4404
} ,
4405
+ {
4406
+ code : `
4407
+ function Thing() {
4408
+ useEffect(async () => {}, []);
4409
+ }
4410
+ ` ,
4411
+ output : `
4412
+ function Thing() {
4413
+ useEffect(async () => {}, []);
4414
+ }
4415
+ ` ,
4416
+ errors : [
4417
+ `Effect callbacks are synchronous to prevent race conditions. ` +
4418
+ `Put the async function inside:\n\n` +
4419
+ `useEffect(() => {\n` +
4420
+ ` let ignore = false;\n` +
4421
+ ` fetchSomething();\n` +
4422
+ `\n` +
4423
+ ` async function fetchSomething() {\n` +
4424
+ ` const result = await ...\n` +
4425
+ ` if (!ignore) setState(result);\n` +
4426
+ ` }\n` +
4427
+ `\n` +
4428
+ ` return () => { ignore = true; };\n` +
4429
+ `}, []);\n` +
4430
+ `\n` +
4431
+ `This lets you handle multiple requests without bugs.` ,
4432
+ ] ,
4433
+ } ,
4382
4434
] ,
4383
4435
} ;
4384
4436
0 commit comments