Synchronize State with Local Storage using useLocalStorage

import React, { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  // State to store our value
  // Pass initial state function to useState so logic is only executed once
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      // Parse stored json or if none return initialValue
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // If error also return initialValue
      console.log(error);
      return initialValue;
    }
  });

  // useEffect to update local storage when the state changes
  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.log(error);
    }
  }, [key, storedValue]); // Only re-run if key or storedValue changes

  return [storedValue, setStoredValue];
}

function UserSettings() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  const [notificationsEnabled, setNotificationsEnabled] = useLocalStorage('notifications', true);

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  const toggleNotifications = () => {
    setNotificationsEnabled((prev) => !prev);
  };

  return (
    <div style={{ padding: '20px', background: theme === 'dark' ? '#333' : '#f0f0f0', color: theme === 'dark' ? '#eee' : '#333' }}>
      <h1>User Settings</h1>
      <p>Current Theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <br />
      <p>Notifications: {notificationsEnabled ? 'Enabled' : 'Disabled'}</p>
      <button onClick={toggleNotifications}>Toggle Notifications</button>
      <p>Refresh the page to see how settings persist!</p>
    </div>
  );
}

export default UserSettings;