diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js
index 5e938703e73683..08a0f5607e7a79 100644
--- a/packages/material-ui/src/ListItem/ListItem.js
+++ b/packages/material-ui/src/ListItem/ListItem.js
@@ -82,6 +82,8 @@ export const styles = theme => ({
   selected: {},
 });
 
+const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+
 /**
  * Uses an additional container component if `ListItemSecondaryAction` is the last child.
  */
@@ -111,7 +113,7 @@ const ListItem = React.forwardRef(function ListItem(props, ref) {
     alignItems,
   };
   const listItemRef = React.useRef();
-  React.useLayoutEffect(() => {
+  useEnhancedEffect(() => {
     if (autoFocus) {
       if (listItemRef.current) {
         listItemRef.current.focus();
diff --git a/packages/material-ui/src/MenuList/MenuList.js b/packages/material-ui/src/MenuList/MenuList.js
index d28d13bc8c5eae..5a52c84f67cd7d 100644
--- a/packages/material-ui/src/MenuList/MenuList.js
+++ b/packages/material-ui/src/MenuList/MenuList.js
@@ -48,11 +48,13 @@ function moveFocus(list, currentFocus, disableListWrap, traversalFunction) {
   }
 }
 
+const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+
 const MenuList = React.forwardRef(function MenuList(props, ref) {
   const { actions, autoFocus, className, onKeyDown, disableListWrap, ...other } = props;
   const listRef = React.useRef();
 
-  React.useLayoutEffect(() => {
+  useEnhancedEffect(() => {
     if (autoFocus) {
       listRef.current.focus();
     }