[test] Enable react/no-unstable-nested-components (#34518)

mui · Oct 17, 2022 · ece62bb · ece62bb
1 parent 158be56
commit ece62bb
Show file tree

Hide file tree

Showing 26 changed files with 39 additions and 45 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -159,6 +159,8 @@ module.exports = {
     'react/state-in-constructor': 'off',
     // stylistic opinion. For conditional assignment we want it outside, otherwise as static
     'react/static-property-placement': 'off',
+    // Currently not in recommended ruleset but catches real bugs.
+    'react/no-unstable-nested-components': 'error',
   },
   overrides: [
     {

diff --git a/docs/data/material/guides/routing/ListRouter.js b/docs/data/material/guides/routing/ListRouter.js
@@ -36,20 +36,16 @@ Router.propTypes = {
   children: PropTypes.node,
 };
 
+const Link = React.forwardRef(function Link(itemProps, ref) {
+  return <RouterLink ref={ref} {...itemProps} role={undefined} />;
+});
+
 function ListItemLink(props) {
   const { icon, primary, to } = props;
 
-  const renderLink = React.useMemo(
-    () =>
-      React.forwardRef(function Link(itemProps, ref) {
-        return <RouterLink to={to} ref={ref} {...itemProps} role={undefined} />;
-      }),
-    [to],
-  );
-
   return (
     <li>
-      <ListItem button component={renderLink}>
+      <ListItem button component={Link} to={to}>
         {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
         <ListItemText primary={primary} />
       </ListItem>

diff --git a/docs/data/material/guides/routing/ListRouter.tsx b/docs/data/material/guides/routing/ListRouter.tsx
@@ -38,23 +38,19 @@ interface ListItemLinkProps {
   to: string;
 }
 
+const Link = React.forwardRef<HTMLAnchorElement, RouterLinkProps>(function Link(
+  itemProps,
+  ref,
+) {
+  return <RouterLink ref={ref} {...itemProps} role={undefined} />;
+});
+
 function ListItemLink(props: ListItemLinkProps) {
   const { icon, primary, to } = props;
 
-  const renderLink = React.useMemo(
-    () =>
-      React.forwardRef<HTMLAnchorElement, Omit<RouterLinkProps, 'to'>>(function Link(
-        itemProps,
-        ref,
-      ) {
-        return <RouterLink to={to} ref={ref} {...itemProps} role={undefined} />;
-      }),
-    [to],
-  );
-
   return (
     <li>
-      <ListItem button component={renderLink}>
+      <ListItem button component={Link} to={to}>
         {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
         <ListItemText primary={primary} />
       </ListItem>

diff --git a/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.spec.tsx b/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.spec.tsx
@@ -23,7 +23,7 @@ const Badge = React.forwardRef(function Badge(
 
 const styledBadge = <BadgeUnstyled components={{ Root, Badge }} />;
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   return (

diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
@@ -23,7 +23,7 @@ function ButtonWithCustomRoot(props: ButtonUnstyledProps) {
   return <ButtonUnstyled {...props} components={{ Root: CustomButtonRoot }} />;
 }
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   return (

diff --git a/packages/mui-base/src/InputUnstyled/InputUnstyled.spec.tsx b/packages/mui-base/src/InputUnstyled/InputUnstyled.spec.tsx
@@ -23,7 +23,7 @@ const InputInput = React.forwardRef(function InputInput(
 
 const styledInput = <InputUnstyled components={{ Root: InputRoot, Input: InputInput }} />;
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   return (

diff --git a/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.spec.tsx b/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.spec.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expectType } from '@mui/types';
 import MenuItemUnstyled from '@mui/base/MenuItemUnstyled';
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   return (

diff --git a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.spec.tsx b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.spec.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expectType } from '@mui/types';
 import MenuUnstyled from '@mui/base/MenuUnstyled';
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   return (

diff --git a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.spec.tsx b/packages/mui-base/src/ModalUnstyled/ModalUnstyled.spec.tsx
@@ -21,7 +21,7 @@ const styledModal = (
   </ModalUnstyled>
 );
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   return (

diff --git a/packages/mui-base/src/MultiSelectUnstyled/MultiSelectUnstyled.spec.tsx b/packages/mui-base/src/MultiSelectUnstyled/MultiSelectUnstyled.spec.tsx
@@ -77,7 +77,7 @@ const MultiSelectUnstyledComponentsOverridesUsingHostComponentTest = (
   />
 );
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   return (

diff --git a/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.spec.tsx b/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.spec.tsx
@@ -29,7 +29,7 @@ const List = React.forwardRef(function List(
 
 const option = <OptionGroupUnstyled components={{ Root, Label, List }} />;
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   return (

diff --git a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.spec.tsx b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.spec.tsx
@@ -13,7 +13,7 @@ const Root = React.forwardRef(function Root<TValue>(
 
 const option = <OptionUnstyled value={null} components={{ Root }} />;
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   return (

diff --git a/packages/mui-base/src/PopperUnstyled/PopperUnstyled.spec.tsx b/packages/mui-base/src/PopperUnstyled/PopperUnstyled.spec.tsx
@@ -9,7 +9,7 @@ function Root(props: PopperUnstyledRootSlotProps) {
 
 const styledPopper = <PopperUnstyled components={{ Root }} open />;
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   return (

diff --git a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.spec.tsx b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.spec.tsx
@@ -77,7 +77,7 @@ const SelectUnstyledComponentsOverridesUsingHostComponentTest = (
   />
 );
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   return (

diff --git a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.spec.tsx b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.spec.tsx
@@ -77,7 +77,7 @@ const Input = React.forwardRef(function Input(
 
 const styledSlider = <SliderUnstyled components={{ Root, Track, Rail, Thumb, Mark, MarkLabel }} />;
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   return (

diff --git a/packages/mui-base/src/SwitchUnstyled/SwitchUnstyled.spec.tsx b/packages/mui-base/src/SwitchUnstyled/SwitchUnstyled.spec.tsx
@@ -41,7 +41,7 @@ const Track = React.forwardRef(function Track(
 
 const styledSwitch = <SwitchUnstyled components={{ Root, Thumb, Track, Input }} />;
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   return (

diff --git a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.spec.tsx b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.spec.tsx
@@ -9,7 +9,7 @@ function Root(props: TabPanelUnstyledRootSlotProps) {
 
 const styledTabPanel = <TabPanelUnstyled components={{ Root }} value={0} />;
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   return (

diff --git a/packages/mui-base/src/TabUnstyled/TabUnstyled.spec.tsx b/packages/mui-base/src/TabUnstyled/TabUnstyled.spec.tsx
@@ -9,7 +9,7 @@ function Root(props: TabUnstyledRootSlotProps) {
 
 const styledTab = <TabUnstyled components={{ Root }} />;
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   return (

diff --git a/packages/mui-base/src/TablePaginationUnstyled/TablePaginationActionsUnstyled.spec.tsx b/packages/mui-base/src/TablePaginationUnstyled/TablePaginationActionsUnstyled.spec.tsx
@@ -35,7 +35,7 @@ const styledTablePaginationActions = (
   />
 );
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   const requiredProps = {

diff --git a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.spec.tsx b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.spec.tsx
@@ -9,7 +9,7 @@ function Root(props: TabsListUnstyledRootSlotProps) {
 
 const styledTabsList = <TabsListUnstyled components={{ Root }} />;
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   return (

diff --git a/packages/mui-base/src/TabsUnstyled/TabsUnstyled.spec.tsx b/packages/mui-base/src/TabsUnstyled/TabsUnstyled.spec.tsx
@@ -9,7 +9,7 @@ function Root(props: TabsUnstyledRootSlotProps) {
 
 const styledTabs = <TabsUnstyled components={{ Root }} />;
 
-const PolymorphicComponentTest = () => {
+const polymorphicComponentTest = () => {
   const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
 
   return (

diff --git a/packages/mui-material-next/src/Button/Button.spec.tsx b/packages/mui-material-next/src/Button/Button.spec.tsx
@@ -11,7 +11,7 @@ const TestOverride = React.forwardRef<HTMLDivElement, { x?: number }>((props, re
 
 const FakeIcon = <div>Icon</div>;
 
-const ButtonTest = () => (
+const buttonTest = () => (
   <div>
     <Button>I am a button!</Button>
     <Button color="inherit">Contrast</Button>

diff --git a/packages/mui-material/src/Button/Button.spec.tsx b/packages/mui-material/src/Button/Button.spec.tsx
@@ -11,7 +11,7 @@ const TestOverride = React.forwardRef<HTMLDivElement, { x?: number }>((props, re
 
 const FakeIcon = () => <div>Icon</div>;
 
-const ButtonTest = () => (
+const buttonTest = () => (
   <div>
     <Button>I am a button!</Button>
     <Button color="inherit">Contrast</Button>

diff --git a/packages/mui-material/src/DialogContentText/DialogContentText.spec.tsx b/packages/mui-material/src/DialogContentText/DialogContentText.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DialogContentText } from '@mui/material';
 
-const DialogContentTextTest = () => {
+const dialogContentTextTest = () => {
   const CustomComponent: React.FC<{ prop1: string; prop2: number }> = () => <div />;
   return (
     <div>

diff --git a/packages/mui-material/src/Typography/typography.spec.tsx b/packages/mui-material/src/Typography/typography.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Typography } from '@mui/material';
 
-const TypographyTest = () => {
+const typographyTest = () => {
   const CustomComponent: React.FC<{ prop1: string; prop2: number }> = () => <div />;
   return (
     <div>

diff --git a/packages/mui-material/test/typescript/components.spec.tsx b/packages/mui-material/test/typescript/components.spec.tsx
@@ -167,7 +167,7 @@ const BottomNavigationTest = () => {
   );
 };
 
-const IconButtonTest = () => (
+const iconButtonTest = () => (
   <div>
     <IconButton aria-label="delete">
       <FakeIcon />
@@ -187,7 +187,7 @@ const IconButtonTest = () => (
   </div>
 );
 
-const IconButtonAsLinkTest = () => {
+const iconButtonAsLinkTest = () => {
   const ForwardedLink = React.forwardRef<HTMLAnchorElement, ReactRouterLinkProps>((props, ref) => (
     <ReactRouterLink {...props} ref={ref} />
   ));