From 595779aff10da37381620c29d5120e49000e7ff1 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 23 Apr 2019 18:39:46 +0200 Subject: [PATCH] [core] Fix useLayoutEffect warnings on the server --- packages/material-ui/src/ListItem/ListItem.js | 4 +++- packages/material-ui/src/MenuList/MenuList.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) 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(); }