Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[code-infra] Enable React compiler eslint plugin #4121

Merged
merged 3 commits into from
Sep 20, 2024

Conversation

Janpot
Copy link
Member

@Janpot Janpot commented Sep 20, 2024

  • Enable React compiler eslint plugin for everything except studio.
  • Fix a few warnings
  • TIL: it's ok to set state during render in specific cases

@apedroferreira There is one error left:

/Users/janpotoms/Projects/toolpad/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
  439:5  error  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-compiler/react-compiler

Would you mind taking a look at it?

@apedroferreira
Copy link
Member

Would you mind taking a look at it?

Taking a look.

@@ -435,8 +436,9 @@ function DashboardLayout(props: DashboardLayoutProps) {

// If useEffect was used, the reset would also happen on the client render after SSR which we don't need
React.useMemo(() => {
selectedItemIdRef.current = '';
// eslint-disable-next-line react-hooks/exhaustive-deps
if (navigation) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Having the selected item come from a context will eventually get rid of this so I guess this workaround should work for now.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you seen that I added a bunch of helpers to optimize translating paths to navigation items and vice versa
https://github.com/mui/toolpad/blob/master/packages/toolpad-core/src/shared/navigation.tsx#L61-L166

it's being used by the new PageContainer breadcrumbs calculation. I expect a lot of it to be reusable for DashboardLayout. It adds some global caching to avoid recalculating these path => item maps over and over again.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, I'll try to use them!

@Janpot Janpot added the scope: code-infra Specific to the core-infra product label Sep 20, 2024
@Janpot Janpot marked this pull request as ready for review September 20, 2024 15:39
@Janpot Janpot requested a review from a team September 20, 2024 15:39
@Janpot Janpot merged commit 1a5b014 into mui:master Sep 20, 2024
13 of 14 checks passed
@Janpot Janpot deleted the enable-compiler-eslint branch September 20, 2024 16:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
scope: code-infra Specific to the core-infra product
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants