chore: Update eslint plugin react hooks followup #9054

snowystinger · 2025-10-17T05:58:15Z

Closes

This PR focused on these rules
'react-hooks/globals': ERROR,
'react-hooks/purity': ERROR,
'react-hooks/set-state-in-effect': ERROR,
'react-hooks/static-components': ERROR,

any random value generators have been moved out from a component to be determined once at usage time, this most affected stories

any syncing of values in a test have been wrapped in an effect, no change otherwise needed

we incorrectly used some useEffects that should have been useLayoutEffects, they rely on measurements in the dom to set state

we dynamically generated a certain Element based on props as a string, this isn't allowed anymore, so just created the same logic as a component. Most notable in Table RAC

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

This reverts commit 7b96414.

# Conflicts: # yarn.lock

…ugin-react-hooks-followup

rspbot · 2025-10-17T06:06:05Z

Build successful! 🎉

snowystinger · 2025-10-17T06:33:30Z

packages/@react-aria/dnd/stories/Reorderable.tsx


  // Use a random drag type so the items can only be reordered within this list and not dragged elsewhere.
-  let dragType = React.useMemo(() => `keys-${Math.random().toString(36).slice(2)}`, []);
+  let dragType = React.useMemo(() => randomDragTypeReorderExample, []);


there's a lot of these, i just moved the random generator out of the component, that should be fine because you couldn't drag between different examples this way either and I don't think we render the same one twice as an example

snowystinger · 2025-10-17T06:35:27Z

packages/@react-aria/utils/test/mergeRefs.test.tsx

-        ref2 = useRef(null);
+        let internalRef1 = useRef(null);
+        let internalRef2 = useRef(null);
+        useEffect(() => {


other option i guess would be to exclude the compiler from running on test files, but seems better to always be in good habits

snowystinger · 2025-10-17T06:36:11Z

packages/@react-spectrum/tabs/src/Tabs.tsx

  }, [tablistRef, wrapperRef, direction, orientation, setCollapsed, prevTabPositions, setTabPositions]);

-  useEffect(() => {
+  useLayoutEffect(() => {


not sure why this was an effect, it's meant to measure the dom, so layout effect should be more correct

snowystinger · 2025-10-17T06:36:46Z

packages/react-aria-components/src/Table.tsx

    }
  });

+  // TODO: Lint doesn't catch these, it thinks we're not in a component render cycle here?


I'm not sure what to make of this yet, but not going to handle it in this series of PRs

kinda weird that it even catches the other ones, the hook that is being called doesn't create a component like https://react.dev/reference/eslint-plugin-react-hooks/lints/static-components demonstrates but perhaps I'm not understanding quite what React is seeing here. To be safe we could define one for table, tr, td, tbody, and th which should cover it I think

ok, went ahead and updated them

I'm mostly worried that the compiler isn't looking through these components, so won't do any optimisations
I'll raise an issue with React at some point about it probably

LFDanLu

The other changes look good to me, just one comment

LFDanLu · 2025-10-17T21:19:36Z

packages/react-aria-components/src/Table.tsx

    }
  });

+  // TODO: Lint doesn't catch these, it thinks we're not in a component render cycle here?


kinda weird that it even catches the other ones, the hook that is being called doesn't create a component like https://react.dev/reference/eslint-plugin-react-hooks/lints/static-components demonstrates but perhaps I'm not understanding quite what React is seeing here. To be safe we could define one for table, tr, td, tbody, and th which should cover it I think

…ugin-react-hooks-followup

rspbot · 2025-10-19T23:46:05Z

Build successful! 🎉

rspbot · 2025-10-19T23:55:12Z

Build successful! 🎉

devongovett · 2025-10-20T18:10:55Z

packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx

+  if (prevIsLoading !== isLoading && !isLoading) {
+    setShowLoading(false);
+    setPrevIsLoading(isLoading);
+  }


yeah this one felt weird to me as well, but https://react.dev/reference/react/useState#storing-information-from-previous-renders claims it is better than setting state in an effect (which the linter will now complain about)

this one is very annoying, but I'm not sure a better way to do it, we "react" to the change in the prop value, which means we set state in render

we use the showLoading state and count on the new render as a response to the timeout up above, so we need to have some way to "un set it"

had to do it in Combobox as well

devongovett · 2025-10-20T18:13:07Z

packages/@react-spectrum/menu/src/Menu.tsx

-  }, [leftOffset, popoverContainer]);
+  let [prevPopoverContainer, setPrevPopoverContainer] = useState<HTMLElement | null>(null);
+  if (popoverContainer && prevPopoverContainer !== popoverContainer && leftOffset.left === 0) {
+    let {left} = popoverContainer.getBoundingClientRect();


Reading from the DOM during render?

crud, i missed that one, i'll look at that

…ugin-react-hooks-followup # Conflicts: # packages/react-aria-components/stories/ListBox.stories.tsx

rspbot · 2025-10-23T04:29:10Z

Build successful! 🎉

rspbot · 2025-10-23T04:37:29Z

Build successful! 🎉

The base branch was changed.

# Conflicts: # eslint.config.mjs

rspbot · 2025-10-24T00:09:07Z

Build successful! 🎉

snowystinger and others added 16 commits October 10, 2025 14:58

chore: update eslint plugin react hooks

5d3e2f3

fix all lint errors

7b96414

Add lines for other config items

7f79dd9

Revert "fix all lint errors"

1208e74

This reverts commit 7b96414.

fix all rules of hooks and exhaustive dependencies

3f9b6c9

enable all rules we are already passing

116fe27

fix event order and cleanup

a7d4e7e

fix lint

30bc1fa

Merge branch 'main' into update-eslint-plugin-react-hooks

5a45466

# Conflicts: # yarn.lock

turn on and fix static-components

ba77f40

turn on and fix set-state-in-effect

8f1cd8e

turn on and fix purity

95687e9

fix lower react version tests

a5803c0

turn on globals and fix errors

be90742

Merge branch 'main' into update-eslint-plugin-react-hooks

4cd669d

Merge branch 'update-eslint-plugin-react-hooks' into update-eslint-pl…

c073772

…ugin-react-hooks-followup

snowystinger changed the title ~~Update eslint plugin react hooks followup~~ chore: Update eslint plugin react hooks followup Oct 17, 2025

snowystinger added the ready for review label Oct 17, 2025

adobe deleted a comment from rspbot Oct 17, 2025

snowystinger commented Oct 17, 2025

View reviewed changes

LFDanLu reviewed Oct 17, 2025

View reviewed changes

snowystinger added 3 commits October 20, 2025 10:37

move event listener attachment to an effect

2f591d5

Merge branch 'update-eslint-plugin-react-hooks' into update-eslint-pl…

500c564

…ugin-react-hooks-followup

convert remaining useElementTypes

a81fa41

LFDanLu previously approved these changes Oct 20, 2025

View reviewed changes

devongovett reviewed Oct 20, 2025

View reviewed changes

snowystinger and others added 2 commits October 23, 2025 15:16

Merge branch 'main' into update-eslint-plugin-react-hooks

bad9964

Merge branch 'update-eslint-plugin-react-hooks' into update-eslint-pl…

e88adfa

…ugin-react-hooks-followup # Conflicts: # packages/react-aria-components/stories/ListBox.stories.tsx

fix read from ref in render

fe3d7b5

Base automatically changed from update-eslint-plugin-react-hooks to main October 23, 2025 18:49

Merge branch 'main' into update-eslint-plugin-react-hooks-followup

37dee08

# Conflicts: # eslint.config.mjs

chore: Update eslint plugin react hooks followup #9054

Are you sure you want to change the base?

chore: Update eslint plugin react hooks followup #9054

Conversation

snowystinger commented Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Oct 17, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Oct 19, 2025

Uh oh!

rspbot commented Oct 19, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snowystinger Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Oct 23, 2025

Uh oh!

rspbot commented Oct 23, 2025

Uh oh!

rspbot commented Oct 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

snowystinger commented Oct 17, 2025 •

edited

Loading

snowystinger Oct 23, 2025 •

edited

Loading