Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
Bug: react-hooks/set-state-in-effect overly strict? | GoodFirstPicks

Bug: react-hooks/set-state-in-effect overly strict?

facebook/react 34 comments 1mo ago
View on GitHub
mediumopenScope: somewhat clearSkill match: maybeReactJavaScriptTypeScript

Why this is a good first issue

The issue involves nuanced React behavior and ESLint rules.

AI Summary

The issue questions whether the `react-hooks/set-state-in-effect` ESLint rule is overly strict, citing common patterns that trigger warnings. It requires understanding React's effect lifecycle and potential performance impacts. The scope is somewhat clear but involves deep React knowledge.

Issue Description

eslint-plugin-react-hooks version: 6.1.1

Steps To Reproduce

  1. Use common, valid patterns for setting state in an effect, from those in the wild and official docs (see patterns in section below)
  2. Problem reported by eslint-plugin-react-hooks 💥

Link to code example: https://codesandbox.io/p/devbox/still-resonance-lzsl44?file=%2Fapp%2FComponent.tsx%3A10%2C49&workspaceId=ws_GfAuHrswXyA1DoeSwsjjjz

Image
$ pnpm eslint . --max-warnings 0

/project/workspace/app/Component.tsx
  7: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).

/project/workspace/app/Component.tsx:7:5
   5 |
   6 |   useEffect(() => {
>  7 |     setDidMount(true);
     |     ^^^^^^^^^^^ Avoid calling setState() directly within an effect
   8 |   }, []);
   9 |
  10 |   retur

GitHub Labels

Status: UnconfirmedComponent: React Compiler

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!

Risk Flags

  • requires deep React knowledge
  • potential performance implications
Loading labels...

Details

Points10 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedno