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

aarongarciah commented 5 months ago

Part of https://github.com/mui/material-ui/issues/42548

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

Contributing

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.
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.
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

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

Components / hooks (#43117, #43946)

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

mui-lab (#42880)

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

mui-styles (#43118)

[x] packages/mui-styles/src/StylesProvider/StylesProvider.js
[x] packages/mui-styles/src/makeStyles/makeStyles.js
[x] packages/mui-styles/src/makeStyles/makeStyles.spec.tsx
[x] packages/mui-styles/src/withStyles/withStyles.js

mui-system (#42637)

[x] packages/mui-system/src/ThemeProvider/ThemeProvider.test.js

mui-docs

[ ] packages/mui-docs/src/CodeCopy/CodeCopy.tsx
[x] packages/mui-docs/src/i18n/i18n.tsx (#42881)

mui-utils (#43051)

[x] packages/mui-utils/src/useControlled/useControlled.js
[x] packages/mui-utils/src/useForkRef/useForkRef.ts
[x] packages/mui-utils/src/useId/useId.ts
[x] packages/mui-utils/src/useIsFocusVisible/useIsFocusVisible.ts
[x] packages/mui-utils/src/useOnMount/useOnMount.ts

mui-joy (#42671)

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

Test (#42626)

[x] packages-internal/test-utils/src/mochaHooks.test.js
[x] test/regressions/TestViewer.js

mui-private-theming (#42619)

[x] packages/mui-private-theming/src/ThemeProvider/ThemeProvider.js
[x] packages/mui-private-theming/src/useTheme/useTheme.js

Documentation website components (#42566)

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

Search keywords: ESLint, React Compiler

binsmyth commented 5 months ago

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

aarongarciah commented 5 months ago

@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 commented 5 months ago

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

aarongarciah commented 5 months ago

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

oliviertassinari commented 5 months ago

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 #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 commented 5 months ago

@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 commented 5 months ago

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

aarongarciah commented 5 months ago

@sai6855 great!

anuujj commented 5 months ago

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

aarongarciah commented 5 months ago

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

@anuujj done

jlewins commented 4 months ago

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

aarongarciah commented 4 months ago

@jlewins done, thank you!

markliu2013 commented 4 months ago

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

sai6855 commented 4 months ago

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

markliu2013 commented 4 months ago

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

sai6855 commented 4 months ago

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

aarongarciah commented 4 months ago

@markliu2013 done

markliu2013 commented 4 months ago

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

binsmyth commented 3 months ago

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

mui / material-ui