[core] Fix eslint-plugin-react-compiler issues

[aarongarciah]

Part of #42548

As part of adopting the official ESLint plugin for the React Compiler, we want to solve all of the reported issues.

Contributing

1. Pick a file (or group of files belonging to the same group, ideally) in the list of existing issues below and let us know in the comments so we can assign them to you.
2. Enable eslint-plugin-react-compiler in your local setup.
   The plugin is disabled by default, you won't see issues reported by it unless you enable it manually. To enable it, go to the root .eslintrc.js file and set ENABLE_REACT_COMPILER_PLUGIN to true. You should start seeing the issues reported right into your IDE if it's configured to report ESLint errors.
3. Once the issue is solved, open a PR mentioning this issue so we can link it in the description and keep it up to date.

When in doubt if an issue can be solved or not (because of false positives or any other reason), explain why in your PR so we can discuss if the ESLint should be silenced in that case.

Issues to fix

Here's the list of files containing issues reported by eslint-plugin-react-compiler (as of June 6th 2024).

mui-material

Demos

• docs/data/material/components/steppers/HorizontalNonLinearStepper.tsx (#42559)
• docs/data/material/components/use-media-query/UseWidth.tsx

Components / hooks (#43117, #43946)

• packages/mui-material/src/Backdrop/Backdrop.js
• packages/mui-material/src/ButtonBase/ButtonBase.js
• packages/mui-material/src/FormControl/FormControl.js
• packages/mui-material/src/Hidden/withWidth.js
• packages/mui-material/src/InputBase/InputBase.js
• packages/mui-material/src/InputBase/InputBase.test.js
• packages/mui-material/src/Popover/Popover.js
• packages/mui-material/src/Select/SelectInput.js
• packages/mui-material/src/Snackbar/Snackbar.test.js
• packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
• packages/mui-material/src/Tooltip/Tooltip.js
• packages/mui-material/src/styles/useTheme.js
• packages/mui-material/src/usePagination/usePagination.test.js
• packages/mui-material/src/useScrollTrigger/useScrollTrigger.js

mui-lab (#42880)

• packages/mui-lab/src/Alert/Alert.js
• packages/mui-lab/src/AlertTitle/AlertTitle.js
• packages/mui-lab/src/Autocomplete/Autocomplete.js
• packages/mui-lab/src/AvatarGroup/AvatarGroup.js
• packages/mui-lab/src/Pagination/Pagination.js
• packages/mui-lab/src/PaginationItem/PaginationItem.js
• packages/mui-lab/src/Rating/Rating.js
• packages/mui-lab/src/Skeleton/Skeleton.js
• packages/mui-lab/src/SpeedDial/SpeedDial.js
• packages/mui-lab/src/SpeedDialAction/SpeedDialAction.js
• packages/mui-lab/src/SpeedDialIcon/SpeedDialIcon.js
• packages/mui-lab/src/TabContext/TabContext.test.js
• packages/mui-lab/src/ToggleButton/ToggleButton.js
• packages/mui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js

mui-styles (#43118)

• packages/mui-styles/src/StylesProvider/StylesProvider.js
• packages/mui-styles/src/makeStyles/makeStyles.js
• packages/mui-styles/src/makeStyles/makeStyles.spec.tsx
• packages/mui-styles/src/withStyles/withStyles.js

mui-system (#42637)

• packages/mui-system/src/ThemeProvider/ThemeProvider.test.js

mui-docs

• packages/mui-docs/src/CodeCopy/CodeCopy.tsx
• packages/mui-docs/src/i18n/i18n.tsx (#42881)

mui-utils (#43051)

• packages/mui-utils/src/useControlled/useControlled.js
• packages/mui-utils/src/useForkRef/useForkRef.ts
• packages/mui-utils/src/useId/useId.ts
• packages/mui-utils/src/useIsFocusVisible/useIsFocusVisible.ts
• packages/mui-utils/src/useOnMount/useOnMount.ts

mui-joy (#42671)

• packages/mui-joy/src/Checkbox/Checkbox.tsx
• packages/mui-joy/src/FormControl/FormControl.tsx
• packages/mui-joy/src/Input/Input.tsx
• packages/mui-joy/src/Radio/Radio.tsx
• packages/mui-joy/src/RadioGroup/RadioGroup.tsx
• packages/mui-joy/src/Select/Select.tsx
• packages/mui-joy/src/Switch/Switch.tsx
• packages/mui-joy/src/Textarea/Textarea.tsx
• packages/mui-joy/src/Tooltip/Tooltip.tsx
• packages/mui-joy/src/styles/ThemeProvider.tsx
• packages/mui-joy/src/styles/extendTheme.test.js

Test (#42626)

• packages-internal/test-utils/src/mochaHooks.test.js
• test/regressions/TestViewer.js

mui-private-theming (#42619)

• packages/mui-private-theming/src/ThemeProvider/ThemeProvider.js
• packages/mui-private-theming/src/useTheme/useTheme.js

Documentation website components (#42566)

• docs/src/components/banner/AppFrameBanner.tsx
• docs/src/components/productMaterial/MaterialStyling.tsx
• docs/src/components/productX/XHero.tsx
• docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx
• docs/src/modules/components/AppNavDrawer.js
• docs/src/modules/components/DemoSandbox.js
• docs/src/modules/components/DemoToolbar.js
• docs/src/modules/components/ReactRunner.tsx
• docs/src/modules/components/ThemeContext.js

Search keywords: ESLint, React Compiler

[binsmyth]

Is it alright for me to work on this? do all the files require separate pull requests?

[aarongarciah]

@binsmyth help is more than welcome! No need for a PR for every file, but let’s keep PRs focused on the same group of files.

Let me know which group of files would you like to work on so I can assign them to you.

[binsmyth]

hey @aarongarciah I have started on Components/hooks group. So i would be happy to work on them. Thank you.

[aarongarciah]

@binsmyth I've assigned you the components/hooks group, thanks.

[oliviertassinari]

npx react-compiler-healthcheck@latest returns:

Successfully compiled 6098 out of 6419 components.
StrictMode usage found.
Found no usage of incompatible libraries.

(Lol, they have https://github.com/facebook/react/blob/main/compiler/packages/react-compiler-healthcheck/src/config.ts#L2)

Seeing the bugs present https://github.com/facebook/react/issues?q=is%3Aissue+is%3Aopen+%5BCompiler+Bug%5D, and playing a bit with it. It makes me feel like we could have a play focused on the long hall:

• have more of a focus on [core] Support React 19 #42381 which is kind of a blocker, at least, without a ponyfill for the cache API. it's likely something developers would want to see first anyway.
• have developers report bugs with the compiler and then them, fix them.
• have on the side, a small burner on advancing this issue, as blockers with the compiler itself get solved.

[aarongarciah]

@oliviertassinari yeah, we're not prioritizing this for now, just setting it up and making the some initial fixes as example so the community can work on it. Still good to play with it early if it helps us streamline the adoption of React Compiler.

[sai6855]

@aarongarciah i'll pick up, mui-private-theming and test. these look small and quick

[aarongarciah]

@sai6855 great!

[anuujj]

Hi @aarongarciah, could you assign mui-joy group to me if no one else has picked it up?

[aarongarciah]

Hi @aarongarciah, could you assign mui-joy group to me if no one else has picked it up?

@anuujj done

[jlewins]

Hi @aarongarciah would you be able to assign the mui-styles group to me, if nobody else is working on it already? Thanks :)

[aarongarciah]

@jlewins done, thank you!

[markliu2013]

@aarongarciah Can I take mui-system if nobody else is working on it?

[sai6855]

@markliu2013 I'm afraid mui system is already done, can you take mui utils

[markliu2013]

@sai6855 oh, I just saw merged, can you assign mui utils to me?

[sai6855]

@markliu2013 go ahead on opening a PR, @aarongarciah will assign

[aarongarciah]

@markliu2013 done

[markliu2013]

@aarongarciah It is my first contribution for open source project, can you help me to review?

[binsmyth]

@aarongarciah. Could you help me review my PR. Some CI are failing but i dont know how to fix it. Thanks.