[core] Fix useLayoutEffect warnings on the server

mui · Apr 23, 2019 · 595779a · 595779a
1 parent 387b79e
commit 595779a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git 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
@@ -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();
     }