Viết Custom Hooks Với Sự Trợ Giúp Của Claude Code

Custom hooks là một trong những patterns mạnh nhất của React. Nhưng viết hook tốt — type-safe, reusable, well-tested — đòi hỏi kinh nghiệm. Claude Code có thể accelerate quá trình này đáng kể.

Workflow: Từ ý tưởng đến production hook

Bước 1: Mô tả use case

Không prompt "viết hook useLocalStorage". Thay vào đó, mô tả problem:

Mình cần persist form state vào localStorage để user không mất
data khi accidentally refresh page. Requirements:
- Generic type support (any serializable value)
- SSR compatible (Next.js App Router)
- Sync across tabs (StorageEvent)
- Cleanup khi component unmount
- TypeScript strict, no any

Bước 2: Claude Code generate initial implementation

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

type SetValue<T> = (value: T | ((prev: T) => T)) => void;

export function useLocalStorage<T>(
  key: string,
  initialValue: T
): [T, SetValue<T>, () => void] {
  // SSR safe: check window exists
  const readValue = useCallback((): T => {
    if (typeof window === 'undefined') return initialValue;
    try {
      const item = window.localStorage.getItem(key);
      return item ? (JSON.parse(item) as T) : initialValue;
    } catch {
      return initialValue;
    }
  }, [key, initialValue]);

  const [storedValue, setStoredValue] = useState<T>(readValue);

  const setValue: SetValue<T> = useCallback(
    (value) => {
      try {
        const newValue = value instanceof Function
          ? value(storedValue)
          : value;
        setStoredValue(newValue);
        if (typeof window !== 'undefined') {
          window.localStorage.setItem(key, JSON.stringify(newValue));
          window.dispatchEvent(
            new StorageEvent('storage', { key, newValue: JSON.stringify(newValue) })
          );
        }
      } catch (error) {
        console.warn('useLocalStorage: Failed to set value', error);
      }
    },
    [key, storedValue]
  );

  const removeValue = useCallback(() => {
    setStoredValue(initialValue);
    if (typeof window !== 'undefined') {
      window.localStorage.removeItem(key);
    }
  }, [key, initialValue]);

  // Sync across tabs
  useEffect(() => {
    const handleStorage = (e: StorageEvent) => {
      if (e.key === key && e.newValue !== null) {
        setStoredValue(JSON.parse(e.newValue) as T);
      }
    };
    window.addEventListener('storage', handleStorage);
    return () => window.removeEventListener('storage', handleStorage);
  }, [key]);

  return [storedValue, setValue, removeValue];
}

Bước 3: Review và iterate

Mình review code Claude Code generate và yêu cầu improvements:

• "Thêm debounce option cho setValue — tránh spam localStorage writes"
• "Handle case khi localStorage full (QuotaExceededError)"
• "Thêm validation function optional cho deserialized data"

Claude Code iterate trên code hiện tại, không viết lại từ đầu. Mỗi iteration cải thiện hook thêm.

Bước 4: Generate tests

Prompt Claude Code viết comprehensive tests. Nó sẽ cover: initial render, set/get values, SSR behavior, cross-tab sync, error handling, cleanup on unmount.

Hooks khác mình đã viết với Claude Code

useMediaQuery: Responsive breakpoint detection, SSR safe, debounced resize.

useIntersectionObserver: Lazy loading, infinite scroll, analytics tracking.

useCopyToClipboard: Copy text với feedback state (copied/error), auto-reset.

useKeyboardShortcut: Global keyboard shortcuts, combo keys, conflict detection.

Tips viết hooks tốt với AI

Luôn bắt đầu từ TypeScript interface: Define hook signature trước, AI implement sau.

Yêu cầu SSR compatibility: Next.js devs hay quên — remind AI check typeof window.

Ask for edge cases: "Chuyện gì xảy ra khi key thay đổi? Khi component remount nhanh?"

Custom hooks + Claude Code = productivity boost lớn. Bạn focus vào WHAT hook cần làm, AI handle HOW.