Local Storage

Everything we have built so far disappears when you refresh the page. Let's fix that by persisting todos to the browser's localStorage with a custom React hook.

The prompt

"Create a custom hook called useLocalStorage at src/hooks/useLocalStorage.ts. It should work like useState but automatically save to and load from localStorage. Handle the case where localStorage is not available (server-side rendering in Next.js). Use a key parameter to namespace the storage. Include proper TypeScript generics."

What Claude Code creates

'use client';
 
import { useState, useEffect } from 'react';
 
export function useLocalStorage<T>(
  key: string,
  initialValue: T
): [T, (value: T | ((prev: T) => T)) => void] {
  // Initialize state with localStorage value or initial value
  const [storedValue, setStoredValue] = useState<T>(() => {
    if (typeof window === 'undefined') {
      return initialValue;
    }
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.warn(`Error reading localStorage key "${key}":`, error);
      return initialValue;
    }
  });
 
  // Update localStorage whenever the state changes
  useEffect(() => {
    if (typeof window === 'undefined') return;
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.warn(`Error setting localStorage key "${key}":`, error);
    }
  }, [key, storedValue]);
 
  return [storedValue, setStoredValue];
}

Understanding the hook

Ask Claude Code to break down the key decisions:

"Why do you check for typeof window === 'undefined'? And why is the initial state a function?"

The file structure

src/
hooks/
useLocalStorage.ts   -- New custom hook
components/
AddTodo.tsx
TodoList.tsx
CategoryFilter.tsx
SearchBar.tsx
types/
todo.ts

Use the hook in page.tsx

"Replace the useState for todos in page.tsx with the useLocalStorage hook. Use the key 'todos'. Keep the sample data as a fallback for first-time users who have nothing in localStorage yet."

import { useLocalStorage } from '@/hooks/useLocalStorage';
import { sampleTodos } from '@/data/sample-todos';
 
export default function Home() {
  const [todos, setTodos] = useLocalStorage<Todo[]>('todos', sampleTodos);
  // ... everything else stays exactly the same
}

That's it -- one line change. The beauty of a custom hook is that the rest of your code does not need to know anything about localStorage. setTodos works exactly like before, but now it also saves to the browser automatically.

Test persistence

Handling hydration warnings

You might see a Next.js hydration warning in the console. This happens because the server renders with the initial value (sample todos) but the client loads different data from localStorage.

"I'm getting a hydration mismatch warning because localStorage data differs from the server render. How do I fix this?"

Claude Code will suggest one of these approaches:

1. Suppress the warning with suppressHydrationWarning on the parent element
2. Use a loading state that shows a skeleton until localStorage is read on the client
3. Delay the localStorage read to after hydration completes

For a learning project, option 1 is fine. For production, option 2 gives the best user experience -- we will touch on this in the empty states section.

Why a custom hook instead of a library?

You might wonder if there is a library for this. There are several (use-local-storage-state, @uidotdev/usehooks, etc.), but building your own teaches you how hooks work. And at 20 lines, the code is simple enough that a dependency is not worth the overhead.

Your todos now survive page refreshes. That is a huge UX improvement with minimal code change. Next: sorting the list so users can organize it their way.