Skip to content

[bug] no-direct-set-state-in-use-effect warns about deferred calls in useCallback #1117

Closed
@keysmashes

Description

@keysmashes

Describe the bug

setState directly in useEffect is bad; setState in a callback in useEffect (e.g. Promise.then) is ok.

The rule understands this if you're calling Promise.then directly in useEffect, but if you're calling Promise.then inside a useCallback which is then called in useEffect, the rule breaks and warns when it shouldn't.

Reproduction

  const [foo, setFoo] = useState(null);
  const test = useCallback(() => {
    setFoo('') // warning (fine)
    fetch().then(() => { setFoo('') }); // warning (problem)
  }, [])
  useEffect(() => {
    test();
    fetch().then(() => { setFoo('') }); // no warning (fine)
  }, [test]);

Expected behavior

Calling setState in a callback should be permitted whether or not the callback is itself in a useCallback.

Platform and versions

node 22.14.0
@eslint-react/eslint-plugin 1.50.0

Stack trace


Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: ReleasedThe issue has been releasedType: BugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions