Repository: mui/material-ui
File: packages/mui-material/src/Hidden/withWidth.js (JavaScript)

Code before:
      noSSR = false,
      initialWidth: initialWidthOption,
    } = options;

    function WithWidth(props) {
      const contextTheme = useTheme();
      const theme = props.theme || contextTheme;
      const { initialWidth, width, ...other } = getThemeProps({
        theme,
        name: 'MuiWithWidth',
        props,
      });

      const [mountedState, setMountedState] = React.useState(false);
      useEnhancedEffect(() => {
        setMountedState(true);
      }, []);

      /**
       * innerWidth |xs      sm      md      lg      xl
       *            |-------|-------|-------|-------|------>
       * width      |  xs   |  sm   |  md   |  lg   |  xl
       */
      const keys = theme.breakpoints.keys.slice().reverse();
      const widthComputed = keys.reduce((output, key) => {
        // TODO: uncomment when compiler enabled // eslint-disable-next-line react-compiler/react-compiler
        // eslint-disable-next-line react-hooks/rules-of-hooks
        const matches = useMediaQuery(theme.breakpoints.up(key));
        return !output && matches ? key : output;
      }, null);

      const more = {
        width:
          width ||
          (mountedState || noSSR ? widthComputed : undefined) ||
          initialWidth ||
          initialWidthOption,
        ...(withThemeOption ? { theme } : {}),
        ...other,
      };

      // When rendering the component on the server,
      // we have no idea about the client browser screen width.
      // In order to prevent blinks and help the reconciliation of the React tree
      // we are not rendering the child component.
      //
      // An alternative is to use the `initialWidth` property.
      if (more.width === undefined) {
        return null;
      }


Review comment (suggestion):
Let's use the same comment we use in the rest of the code base

```suggestion
        // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
```

Code after:
      noSSR = false,
      initialWidth: initialWidthOption,
    } = options;

    function WithWidth(props) {
      const contextTheme = useTheme();
      const theme = props.theme || contextTheme;
      const { initialWidth, width, ...other } = getThemeProps({
        theme,
        name: 'MuiWithWidth',
        props,
      });

      const [mountedState, setMountedState] = React.useState(false);
      useEnhancedEffect(() => {
        setMountedState(true);
      }, []);

      /**
       * innerWidth |xs      sm      md      lg      xl
       *            |-------|-------|-------|-------|------>
       * width      |  xs   |  sm   |  md   |  lg   |  xl
       */
      const keys = theme.breakpoints.keys.slice().reverse();
      const widthComputed = keys.reduce((output, key) => {
        // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
        // eslint-disable-next-line react-hooks/rules-of-hooks
        const matches = useMediaQuery(theme.breakpoints.up(key));
        return !output && matches ? key : output;
      }, null);

      const more = {
        width:
          width ||
          (mountedState || noSSR ? widthComputed : undefined) ||
          initialWidth ||
          initialWidthOption,
        ...(withThemeOption ? { theme } : {}),
        ...other,
      };

      // When rendering the component on the server,
      // we have no idea about the client browser screen width.
      // In order to prevent blinks and help the reconciliation of the React tree
      // we are not rendering the child component.
      //
      // An alternative is to use the `initialWidth` property.
      if (more.width === undefined) {
        return null;
      }