chore: Update eslint plugin react hooks immutability #9055

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

Closes

This PR focuses on react-hooks/immutability and removing a few eslint-disable-next-lines

✅ 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

# Conflicts: # packages/@react-stately/checkbox/src/useCheckboxGroupState.ts

…ugin-react-hooks-followup

…eslint-plugin-react-hooks-immutability

snowystinger · 2025-10-17T06:08:37Z

packages/@react-aria/collections/src/CollectionBuilder.tsx

  }, [document]);
  let getServerSnapshot = useCallback(() => {
-    document.isSSR = true;
+    document.setSSR(true);


had to introduce this because the React compiler is a bit strict about mutating, I think it should be allowed in this case, but React doesn't know that, so I've tricked it. I had tried storing the document in a ref and editing it that way, which fixes the compiler problem, but it broke some tests, I'm not sure why and it makes me a little worried. This is the closest to what we've tested for years though, so I'm ok with this for now.

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

packages/@react-aria/ssr/src/SSRProvider.tsx


-let componentIds = new WeakMap();
-
-function useCounter(isDisabled = false) {


moved these things that can't be readily fixed to other files so the compiler won't bail on the entire file

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

packages/@react-aria/utils/src/useSyncRef.ts

-
 // Syncs ref from context with ref passed to hook
-export function useSyncRef<T>(context?: ContextValue<T> | null, ref?: RefObject<T | null>): void {
+export function useSyncRef<T>(contextRef?: RefObject<T | null> | null, ref?: RefObject<T | null>): void {


private function so I'm ok changing the API
however, if we're worried, I can make a second one which is safe for the compiler vs this old one

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

packages/@react-aria/virtualizer/src/ScrollView.tsx

  };
 }
+
+function useScrollViewContentSizeChange({updateSize, contentSize, isUpdatingSize, setUpdate}: {updateSize: (flush: typeof flushSync) => void, contentSize: Size, isUpdatingSize: RefObject<boolean>, setUpdate: (update: {}) => void}) {


may need to move to a separate file, can't readily fix this one

snowystinger · 2025-10-17T06:40:19Z

packages/@react-stately/datepicker/src/useDateRangePickerState.ts

    granularity,
    hasTime,
    setDate(part, date) {
+      // Both the start and end datefields update on form reset back to back, so this is a problem due to not supporting setState callbacks


comment a little out of date with changes we made

snowystinger · 2025-10-17T06:40:42Z

packages/@react-stately/datepicker/src/useDateRangePickerState.ts

  let value = controlledValue || placeholderValue;

  let setValue = (newValue: RangeValue<DateValue | null> | null) => {
+    // TODO: I don't know how to fix this one


I tried 3 times to re-write this file, I failed each time. Anyone else want a swing at it?

…ugin-react-hooks-followup

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

…eslint-plugin-react-hooks-immutability

# Conflicts: # eslint.config.mjs

…eslint-plugin-react-hooks-immutability

rspbot · 2025-10-27T02:08:59Z

Build successful! 🎉

# Conflicts: # eslint.config.mjs

rspbot · 2025-11-06T22:06:59Z

Build successful! 🎉

rspbot · 2025-11-06T22:21:44Z

Build successful! 🎉

# Conflicts: # packages/@react-spectrum/s2/test/EditableTableView.test.tsx

rspbot · 2026-01-05T00:32:11Z

Build successful! 🎉

# Conflicts: # packages/react-aria-components/src/Dialog.tsx

rspbot · 2026-01-08T05:06:57Z

Build successful! 🎉

rspbot · 2026-01-08T05:06:58Z

## API Changes

@react-aria/utils

/@react-aria/utils:useSyncRef

 useSyncRef <T> {
-  context?: ContextValue<T> | null
+  contextRef?: RefObject<T | null> | null
   ref?: RefObject<T | null>
   returnVal: undefined
 }

yihuiliao · 2026-01-08T20:36:47Z

packages/@react-stately/datepicker/src/useDateFieldState.ts

-      );
-    }
-  }, [calendar, granularity, validSegments, defaultTimeZone, props.placeholderValue]);
+  let [lastCalendar, setLastCalendar] = useState(calendar);


what's the reason for changing this? when i ran the lint, i didn't see any errors regarding these lines

Can't call a setState from inside the effect, and can't read/write to a ref from render. So when I changed the setState to be called in render, the ref had to also change to state

could this be a potential false positive? saw this while looking into it more facebook/react#34045

I believe it falls into this category facebook/react#34045 (comment)
And the extra setState will be batched with the placeholder change anyways

it'll also now be more precise to the state as it'll bail and then render again with the up to date state, meaning no possible flash of stale state

yihuiliao · 2026-01-09T17:36:08Z

packages/@react-spectrum/dialog/src/Dialog.tsx

    buttonGroup: {UNSAFE_className: classNames(styles, 'spectrum-Dialog-buttonGroup', {'spectrum-Dialog-buttonGroup--noFooter': !hasFooter}), align: 'end'}
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }), [hasFooter, hasHeader, titleProps]);
+  }), [hasFooter, hasHeader, titleProps, hasTypeIcon, hasHeading]);


was there a reason why we disabled the lint here instead of just adding all the dependencies in the first place? this is probably fine, im just curious if we intentionally left it out for some reason

I suspect that the line was eslint disabled to suppress a warning because we were lazy, including these is correct

Change that introduced it agreed upon ignoring to cut down on total number of warnings with least changes:
ed2c240

snowystinger and others added 24 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

Turn on immutability and start trying to fix it

90d350c

fix all the "easy" cases

8c6d21f

feat: Support function setState callback in useControlledState

e7b7fea

# Conflicts: # packages/@react-stately/checkbox/src/useCheckboxGroupState.ts

fixes

7057ed4

fix docs build

3a5e3b2

fix useDateFieldState immutable lint errors

c0dcf3f

fix as much immutability and eslint-disables as possible

a84fd47

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

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

2d55869

…eslint-plugin-react-hooks-immutability

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

snowystinger added the ready for review label Oct 17, 2025

snowystinger commented Oct 17, 2025

View reviewed changes

snowystinger and others added 10 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

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

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

b0cf01c

…eslint-plugin-react-hooks-immutability

fix read from ref in render

fe3d7b5

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

37dee08

# Conflicts: # eslint.config.mjs

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

785d9cd

…eslint-plugin-react-hooks-immutability

fix docs

094f8ea

Base automatically changed from update-eslint-plugin-react-hooks-followup to main November 6, 2025 21:52

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

b39c71e

# Conflicts: # eslint.config.mjs

reidbarber previously approved these changes Nov 6, 2025

View reviewed changes

revert scrollview

c424850

snowystinger dismissed reidbarber’s stale review via c424850 November 6, 2025 22:13

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

8f4ba11

# Conflicts: # packages/@react-spectrum/s2/test/EditableTableView.test.tsx

reidbarber previously approved these changes Jan 6, 2026

View reviewed changes

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

9de58df

# Conflicts: # packages/react-aria-components/src/Dialog.tsx

snowystinger dismissed reidbarber’s stale review via 9de58df January 8, 2026 04:59

reidbarber approved these changes Jan 8, 2026

View reviewed changes

yihuiliao reviewed Jan 8, 2026

View reviewed changes

yihuiliao reviewed Jan 9, 2026

View reviewed changes


		let componentIds = new WeakMap();

		function useCounter(isDisabled = false) {

chore: Update eslint plugin react hooks immutability #9055

Are you sure you want to change the base?

chore: Update eslint plugin react hooks immutability #9055

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!

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!

rspbot commented Oct 27, 2025

Uh oh!

rspbot commented Nov 6, 2025

Uh oh!

rspbot commented Nov 6, 2025

Uh oh!

rspbot commented Jan 5, 2026

Uh oh!

rspbot commented Jan 8, 2026

Uh oh!

rspbot commented Jan 8, 2026

@react-aria/utils

/@react-aria/utils:useSyncRef

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snowystinger Jan 9, 2026 • 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!

snowystinger Jan 9, 2026 • 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

snowystinger commented Oct 17, 2025 •

edited

Loading

snowystinger Jan 9, 2026 •

edited

Loading

snowystinger Jan 9, 2026 •

edited

Loading