Synchronizing React State with Local Storage using a Custom Hook

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

// Custom Hook to manage state persisted in localStorage
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(() => {
    if (typeof window === 'undefined') {
      return initialValue;
    }
    try {
      // Get from local storage by key
      const item = window.localStorage.getItem(key);
      // Parse stored json or if none return initialValue
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // If error, return initialValue
      console.error(error);
      return initialValue;
    }
  });

  // useEffect to update local storage when the state changes
  useEffect(() => {
    if (typeof window !== 'undefined') {
      try {
        window.localStorage.setItem(key, JSON.stringify(storedValue));
      } catch (error) {
        console.error(error);
      }
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

// Example Component using the custom hook
function LocalStorageCounter() {
  const [count, setCount] = useLocalStorage('myAppCount', 0);

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(prevCount => prevCount + 1)} style={{ marginRight: '10px', padding: '10px' }}>
        Increment
      </button>
      <button onClick={() => setCount(0)} style={{ padding: '10px' }}>
        Reset
      </button>
      <p>Try refreshing the page; the count will persist!</p>
    </div>
  );
}