Persist React State to Local Storage with useLocalStorage Hook

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

// Custom Hook: useLocalStorage
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 also 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]); // Re-run effect if key or storedValue changes

  return [storedValue, setStoredValue];
}

// Component using the custom hook
function LocalStorageExample() {
  // Use our custom hook to persist a counter
  const [count, setCount] = useLocalStorage('my-counter', 0);
  const [userName, setUserName] = useLocalStorage('user-name', 'Guest');

  return (
    <div>
      <h2>useLocalStorage Custom Hook Example</h2>

      <div>
        <h3>Counter persisted in Local Storage</h3>
        <p>Current Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment Count</button>
        <button onClick={() => setCount(0)}>Reset Count</button>
      </div>

      <div style={{ marginTop: '20px' }}>
        <h3>User Name persisted in Local Storage</h3>
        <input
          type="text"
          value={userName}
          onChange={(e) => setUserName(e.target.value)}
          placeholder="Enter your name"
        />
        <p>Hello, {userName}!</p>
      </div>

      <p style={{ marginTop: '30px', fontStyle: 'italic' }}>
        Try refreshing the page to see the values persist!
      </p>
    </div>
  );
}

export default LocalStorageExample;