Custom Hook for Local Storage Persistence

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);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(`Error reading local storage key "${key}":`, error);
      return initialValue;
    }
  });

  // useEffect to update local storage when the state changes
  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error(`Error writing to local storage key "${key}":`, error);
    }
  }, [key, storedValue]); // Re-run if key or storedValue changes

  return [storedValue, setStoredValue];
}

// Example Usage Component
function SettingsPanel() {
  const [userName, setUserName] = useLocalStorage('userName', 'Guest');
  const [notificationsEnabled, setNotificationsEnabled] = useLocalStorage('notifications', true);

  return (
    <div>
      <h2>User Settings</h2>
      <label>
        User Name:
        <input
          type="text"
          value={userName}
          onChange={(e) => setUserName(e.target.value)}
        />
      </label>
      <p>Hello, {userName}!</p>

      <label>
        <input
          type="checkbox"
          checked={notificationsEnabled}
          onChange={(e) => setNotificationsEnabled(e.target.checked)}
        />
        Enable Notifications
      </label>
      <p>Notifications are {notificationsEnabled ? 'enabled' : 'disabled'}.</p>

      <button onClick={() => {
        setUserName('Reset User');
        setNotificationsEnabled(false);
      }}>Reset Settings</button>
    </div>
  );
}

export default SettingsPanel;