[docs-infra] Fix React Compiler ESLint issues in website components #42566
Conversation
Netlify deploy previewhttps://deploy-preview-42566--material-ui.netlify.app/ Bundle size report |
| @@ -101,7 +101,10 @@ export const useResizeHandle = ( | |||
| if (target.current && dragging && clientX) { | |||
| const objectRect = target.current.getBoundingClientRect(); | |||
| const newWidth = clientX - objectRect.left + dragOffset; | |||
| target.current.style.width = `clamp(${minWidth}, ${Math.floor(newWidth)}px, ${maxWidth})`; | |||
| target.current.style.setProperty( | |||
There was a problem hiding this comment.
Using style.setProperty so there's no "mutation".
There was a problem hiding this comment.
This feels strange: facebook/react#29832.
| const rowGroupingCounterRef = React.useRef(0); | ||
| const isGroupExpandedByDefault = React.useCallback(() => { | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| rowGroupingCounter += 1; | ||
| return rowGroupingCounter === 3; | ||
| rowGroupingCounterRef.current += 1; | ||
| return rowGroupingCounterRef.current === 3; |
There was a problem hiding this comment.
This is probably the only potentially sensitive change, but looks like the behavior is the same.
|
Looking into the reported ESLint errors:
We use the |
|
I've pushed a change commenting the ESLint disable comments for the - // eslint-disable-next-line react-compiler/react-compiler -- useEnhancedEffect uses useEffect under the hood
+ // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- useEnhancedEffect uses useEffect under the hoodWe can't have disabled rules that are not configured because we use the --report-unused-disable-directives ESLint flag. |
aarongarciah
added
website
| @@ -101,7 +101,10 @@ export const useResizeHandle = ( | |||
| if (target.current && dragging && clientX) { | |||
| const objectRect = target.current.getBoundingClientRect(); | |||
| const newWidth = clientX - objectRect.left + dragOffset; | |||
| target.current.style.width = `clamp(${minWidth}, ${Math.floor(newWidth)}px, ${maxWidth})`; | |||
| target.current.style.setProperty( | |||
There was a problem hiding this comment.
This feels strange: facebook/react#29832.
aarongarciah
force-pushed
the
website-fix-eslint-react-compiler-issues
branch
from
7d56792
to
e861ac6
Compare
aarongarciah
requested review from
mnajdova and
DiegoAndai
and removed request for
brijeshb42 and
mnajdova
Part of #42564
Fixes or silences errors reported by
eslint-plugin-react-compilerin the website components.The silenced occurrences are prepended with a comment because we use the --report-unused-disable-directives and we can't silence rules that are not configured, like the ones coming from
eslint-plugin-react-compiler, which is disabled by default as of today.// TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- useEnhancedEffect uses useEffect under the hoodApart from that, add a missing React key.
How to test
Make sure the parts of the docs that are affected by the changes work as expected. Half of the changes are just silencing the corresponding ESLint rule.