Hydration Error in updating isExpanded state from LocalStorage

[HarshArora-1205]

const [isSidebarExpanded, setIsSidebarExpanded] = useState(() => {
    if (typeof window !== 'undefined') {
      const saved = window.localStorage.getItem('sidebarExpanded');
      if (saved === null) {
        return true;
      }
      return JSON.parse(saved);
    }
    return true; // default state if window is not defined
  });

  useEffect(() => {
    if (typeof window !== 'undefined') {
      window.localStorage.setItem(
        'sidebarExpanded',
        JSON.stringify(isSidebarExpanded),
      );
    }
  }, [isSidebarExpanded]);

  const toggleSidebar = () => {
    setIsSidebarExpanded(!isSidebarExpanded);
  };

Error: Hydration failed because the initial UI does not match what was rendered on the server.

This particular part brings Hydration Error. So for that I used 2 useEffects instead of directly initializing via function and created a mounted state to check if component is mounted or not. Then track the state changes.

Want to know if there is something else that can be done and is efficient.

my updates:

const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    if (typeof window !== "undefined") {
      const saved = window.localStorage.getItem("sidebarCollapsed");
      if (saved !== null) {
        setIsCollapsed(JSON.parse(saved));
      }
      setMounted(true);
    }
  }, []);

  useEffect(() => {
    if (mounted && typeof window !== "undefined") {
      window.localStorage.setItem("sidebarCollapsed", JSON.stringify(isCollapsed));
    }
  }, [isCollapsed, mounted]);

  const toggleSidebar = () => {
    setIsCollapsed(!isCollapsed);
  };

Here I am using isCollapsed instead of isExpanded.

[cozarkd]

Same problem here. Are you happy with this solution?

[HarshArora-1205]

Hi.

Worked fine for me. If you find any better workaround , do let me know.

[HarshArora-1205]

@hqasmei Can you check this?