App1.jsx and App2.jsx contain the same code except App1 imports all of React with
import * as React from 'react' whereas App2 imports useState and useEffect individually from
the React package with import { useState, useEffect } from 'react'.
Both App1 and App2 fail eslint due to the set-state-in-effect rule being violated.
Only App1 fails eslint.
Run npm run lint.
❯ npm run lint
> eslint-react-repro@1.0.0 lint
> eslint .
/home/discord/dev/eslint-react-repro/App1.jsx
9:5 error Error: Calling setState synchronously within an effect can trigger cascading renders
Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:
* Update external systems with the latest state from React.
* Subscribe for updates from some external system, calling setState in a callback function when external state changes.
Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).
7 | useEffect(() => {
8 | // This should trigger the set-state-in-effect rule
> 9 | setCount(1);
| ^^^^^^^^ Avoid calling setState() directly within an effect
10 | }, []);
11 |
12 | return <div>Count: {count}</div>; react-hooks/set-state-in-effect
✖ 1 problem (1 error, 0 warnings)