Synchronizing a React Component with a Browser's LocalStorage

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

function useLocalStorageState(key, defaultValue) {
  // Subscribe to changes to the localStorage key
  const subscribe = (callback) => {
    const listener = (e) => {
      if (e.storageArea === localStorage && e.key === key) {
        callback();
      }
    };
    window.addEventListener('storage', listener);
    return () => window.removeEventListener('storage', listener);
  };

  // Get the current state from localStorage
  const getSnapshot = () => {
    const item = localStorage.getItem(key);
    return item ? JSON.parse(item) : defaultValue;
  };

  // Synchronize state to the localStorage key
  return useSyncExternalStore(subscribe, getSnapshot);
}

// Example component using the useLocalStorageState hook
function MyComponent({ storageKey }) {
  const [value, setValue] = useLocalStorageState(storageKey, 'default value');

  useEffect(() => {
    // Update the localStorage whenever the state changes
    localStorage.setItem(storageKey, JSON.stringify(value));
  }, [value, storageKey]);

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  );
}