Revert "[utils] Port useLocalStorageState hook from Toolpad (#41096)"

This reverts commit b923a63.
See for why #41096 (comment)

docs/src/components/header/ThemeModeToggle.tsx

@@ -6,7 +6,6 @@ import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined';
 import LightModeOutlined from '@mui/icons-material/LightModeOutlined';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
-import useLocalStorageState from '@mui/utils/useLocalStorageState';
 
 function CssVarsModeToggle(props: { onChange: (checked: boolean) => void }) {
   const [mounted, setMounted] = React.useState(false);
@@ -40,19 +39,30 @@ function CssVarsModeToggle(props: { onChange: (checked: boolean) => void }) {
 export default function ThemeModeToggle() {
   const theme = useTheme();
   const changeTheme = useChangeTheme();
-  const [mode, setMode] = useLocalStorageState('mui-mode', 'system');
+  const [mode, setMode] = React.useState<string | null>(null);
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const preferredMode = prefersDarkMode ? 'dark' : 'light';
+
+  React.useEffect(() => {
+    let initialMode = 'system';
+    try {
+      initialMode = localStorage.getItem('mui-mode') || initialMode;
+    } catch (error) {
+      // do nothing
+    }
+    setMode(initialMode);
+  }, []);
 
   const handleChangeThemeMode = (checked: boolean) => {
     const paletteMode = checked ? 'dark' : 'light';
     setMode(paletteMode);
-  };
 
-  React.useEffect(() => {
-    const paletteMode = mode === 'system' ? preferredMode : mode;
+    try {
+      localStorage.setItem('mui-mode', paletteMode); // syncing with homepage, can be removed once all pages are migrated to CSS variables
+    } catch (error) {
+      // do nothing
+    }
     changeTheme({ paletteMode });
-  }, [changeTheme, mode, preferredMode]);
+  };
 
   if (mode === null) {
     return <IconButton color="primary" disableTouchRipple />;

docs/src/modules/components/AppSettingsDrawer.js

@@ -18,7 +18,6 @@ import FormatTextdirectionLToRIcon from '@mui/icons-material/FormatTextdirection
 import FormatTextdirectionRToLIcon from '@mui/icons-material/FormatTextdirectionRToL';
 import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
 import { useTranslate } from '@mui/docs/i18n';
-import useLocalStorageState from '@mui/utils/useLocalStorageState';
 
 const Heading = styled(Typography)(({ theme }) => ({
   margin: '20px 0 10px',
@@ -43,22 +42,44 @@ function AppSettingsDrawer(props) {
   const t = useTranslate();
   const upperTheme = useTheme();
   const changeTheme = useChangeTheme();
-  const [mode, setMode] = useLocalStorageState('mui-mode', 'system');
+  const [mode, setMode] = React.useState(null);
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const preferredMode = prefersDarkMode ? 'dark' : 'light';
 
+  React.useEffect(() => {
+    // syncing with homepage, can be removed once all pages are migrated to CSS variables
+    let initialMode = 'system';
+    try {
+      initialMode = localStorage.getItem('mui-mode') || initialMode;
+    } catch (error) {
+      // do nothing
+    }
+    setMode(initialMode);
+  }, [preferredMode]);
+
   const handleChangeThemeMode = (event, paletteMode) => {
     if (paletteMode === null) {
       return;
     }
 
     setMode(paletteMode);
-  };
 
-  React.useEffect(() => {
-    const paletteMode = mode === 'system' ? preferredMode : mode;
-    changeTheme({ paletteMode });
-  }, [changeTheme, mode, preferredMode]);
+    if (paletteMode === 'system') {
+      try {
+        localStorage.setItem('mui-mode', 'system'); // syncing with homepage, can be removed once all pages are migrated to CSS variables
+      } catch (error) {
+        // thrown when cookies are disabled.
+      }
+      changeTheme({ paletteMode: preferredMode });
+    } else {
+      try {
+        localStorage.setItem('mui-mode', paletteMode); // syncing with homepage, can be removed once all pages are migrated to CSS variables
+      } catch (error) {
+        // thrown when cookies are disabled.
+      }
+      changeTheme({ paletteMode });
+    }
+  };
 
   const handleChangeDirection = (event, direction) => {
     if (direction === null) {

docs/src/modules/components/HighlightedCodeWithTabs.tsx

@@ -4,7 +4,6 @@ import { Tabs, TabsOwnProps } from '@mui/base/Tabs';
 import { TabsList as TabsListBase } from '@mui/base/TabsList';
 import { TabPanel as TabPanelBase } from '@mui/base/TabPanel';
 import { Tab as TabBase } from '@mui/base/Tab';
-import useLocalStorageState from '@mui/utils/useLocalStorageState';
 import HighlightedCode from './HighlightedCode';
 
 const TabList = styled(TabsListBase)(({ theme }) => ({
@@ -86,16 +85,36 @@ export default function HighlightedCodeWithTabs({
   storageKey?: string;
 } & Record<string, any>) {
   const availableTabs = React.useMemo(() => tabs.map(({ tab }) => tab), [tabs]);
-  const [activeTab, setActiveTab] = useLocalStorageState(storageKey ?? null, availableTabs[0]);
+  const [activeTab, setActiveTab] = React.useState(availableTabs[0]);
 
   const [mounted, setMounted] = React.useState(false);
 
   React.useEffect(() => {
+    try {
+      setActiveTab((prev) => {
+        if (storageKey === undefined) {
+          return prev;
+        }
+        const storedValues = localStorage.getItem(storageKey);
+
+        return storedValues && availableTabs.includes(storedValues) ? storedValues : prev;
+      });
+    } catch (error) {
+      // ignore error
+    }
     setMounted(true);
-  }, []);
+  }, [availableTabs, storageKey]);
 
   const handleChange: TabsOwnProps['onChange'] = (event, newValue) => {
     setActiveTab(newValue as string);
+    if (storageKey === undefined) {
+      return;
+    }
+    try {
+      localStorage.setItem(storageKey, newValue as string);
+    } catch (error) {
+      // ignore error
+    }
   };
 
   const ownerState = { mounted };