Estoy usando React y Material UI v5. Tengo un componente de menú dentro de mi diseño que tiene elementos secundarios. Al hacer clic en el menú hace que los niños se refresquen. Intenté resolverlo envolviendo los componentes secundarios en React.memo(child) pero el resultado sigue siendo el mismo. ¿Qué estoy haciendo mal?
componente de menú
const MyMenu = ({ menuAnchorEl, setMenuAnchorEl }) => { const menuOpen = Boolean(menuAnchorEl); const handleMenuClose = () => { setMenuAnchorEl(null); }; const menuOptions = [ { link: '/overview', Icon: Dashboard, label: 'Overview', }, ]; const MenuOption = ({ link, Icon, label, }: { link: string; Icon: OverridableComponent<SvgIconTypeMap<unknown, 'svg'>> & { muiName: string; }; label: string; }) => { return ( <NavLink href={link}> <MenuItem> <ListItemIcon> <Icon color="secondary" fontSize="small" /> </ListItemIcon> <ListItemText sx={{ color: 'text.primary' }}> {label} </ListItemText> <Typography variant="body2"></Typography> </MenuItem> </NavLink> ); }; return ( <Menu anchorEl={menuAnchorEl} open={menuOpen} onClose={handleMenuClose} variant="selectedMenu" > <MenuList> {menuOptions.map((n) => ( <MenuOption key={n.link} {...n} /> ))} </MenuList> </Menu> ); };componente de diseño
const MyLayout = observer(({ children }: IProps) => { const classes = useStyles(); const [menuAnchorEl, setMenuAnchorEl] = React.useState<null | HTMLElement>( null, ); return ( <> <Hidden mdDown implementation="css"> <InstallerMenu menuAnchorEl={menuAnchorEl} setMenuAnchorEl={setMenuAnchorEl} /> <div className={classes.appFrame}> <div className={classes.container}>{children}</div> </div> </Hidden> </> ); });Tiene el componente MenuOption dentro de MyMenu y cada vez que reacciona vuelve a renderizar el componente principal MyMenu , MenuOption se vuelve a definir y hace que todos los niños se vuelvan a renderizar de nuevo, para solucionar el problema, debe sacar MenuOption fuera de los componentes principales y pásele los accesorios necesarios, su código se verá así
alos lea este artículo para saber más por qué el componente dentro del componente es malo
const MyMenu = ({ menuAnchorEl, setMenuAnchorEl }) => { const menuOpen = Boolean(menuAnchorEl); const handleMenuClose = () => { setMenuAnchorEl(null); }; const menuOptions = [ { link: '/overview', Icon: Dashboard, label: 'Overview', }, ]; return ( <Menu anchorEl={menuAnchorEl} open={menuOpen} onClose={handleMenuClose} variant="selectedMenu" > <MenuList> {menuOptions.map((n) => ( <MenuOption key={n.link} {...n} /> ))} </MenuList> </Menu> ); }; function MenuOption({requiredProps}){ return ( <NavLink href={link}> <MenuItem> <ListItemIcon> <Icon color="secondary" fontSize="small" /> </ListItemIcon> <ListItemText sx={{ color: 'text.primary' }}> {label} </ListItemText> <Typography variant="body2"></Typography> </MenuItem> </NavLink> ); };