Building Custom Hooks

// Simple custom hook
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  
  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  const reset = () => setCount(initialValue);
  
  return { count, increment, decrement, reset };
}

// Using the custom hook
function Counter() {
  const { count, increment, decrement, reset } = useCounter(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

// Multiple components can use the same hook
function AnotherCounter() {
  const { count, increment } = useCounter(10);
  return <button onClick={increment}>{count}</button>;
}

// Custom hook with parameters
function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  
  const toggle = () => setValue(v => !v);
  const setTrue = () => setValue(true);
  const setFalse = () => setValue(false);
  
  return { value, toggle, setTrue, setFalse };
}

// Usage
function ToggleButton() {
  const { value, toggle } = useToggle();
  
  return (
    <button onClick={toggle}>
      {value ? 'ON' : 'OFF'}
    </button>
  );
}

Custom hooks are functions starting with 'use' that can use React hooks. They return values and functions that components can use. This allows sharing logic between components.

// ❌ BAD: Conditional hook call
function BadComponent({ condition }) {
  if (condition) {
    const [value, setValue] = useState(0); // ❌ Wrong!
  }
  return <div>Content</div>;
}

// ✅ GOOD: Always call hooks
function GoodComponent({ condition }) {
  const [value, setValue] = useState(0); // ✅ Always called
  return <div>Content</div>;
}

// ❌ BAD: Hook in loop
function BadList({ items }) {
  const states = [];
  items.forEach(item => {
    states.push(useState(item)); // ❌ Wrong!
  });
  return <div>List</div>;
}

// ✅ GOOD: Extract to component
function GoodList({ items }) {
  return (
    <div>
      {items.map(item => (
        <ListItem key={item.id} item={item} />
      ))}
    </div>
  );
}

function ListItem({ item }) {
  const [value, setValue] = useState(item); // ✅ OK in component
  return <div>{value}</div>;
}

// ❌ BAD: Hook in regular function
function regularFunction() {
  const [value, setValue] = useState(0); // ❌ Wrong!
}

// ✅ GOOD: Custom hook
function useCustomHook() {
  const [value, setValue] = useState(0); // ✅ OK in custom hook
  return value;
}

// ✅ GOOD: Conditional logic inside hook
function useConditional(condition) {
  const [value, setValue] = useState(0);
  
  useEffect(() => {
    if (condition) {
      // ✅ OK: conditional logic inside hook
      setValue(1);
    }
  }, [condition]);
  
  return value;
}

Hooks must be called at the top level, in the same order every render. Don't call hooks conditionally, in loops, or in regular functions. Use conditional logic inside hooks, not around hook calls.

// Data fetching hook
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    setLoading(true);
    setError(null);
    
    fetch(url)
      .then(res => {
        if (!res.ok) throw new Error('Failed to fetch');
        return res.json();
      })
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, [url]);
  
  return { data, loading, error };
}

// Usage
function UserProfile({ userId }) {
  const { data: user, loading, error } = useFetch(`/api/users/${userId}`);
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>{user.name}</div>;
}

// Local storage hook
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });
  
  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(error);
    }
  };
  
  return [storedValue, setValue];
}

// Usage
function Settings() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  
  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
    </select>
  );
}

// Window size hook
function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });
  
  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };
    
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  return size;
}

// Usage
function ResponsiveComponent() {
  const { width } = useWindowSize();
  return <div>{width < 768 ? 'Mobile' : 'Desktop'}</div>;
}

// Interval hook
function useInterval(callback, delay) {
  const savedCallback = useRef();
  
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);
  
  useEffect(() => {
    if (delay === null) return;
    
    const id = setInterval(() => {
      savedCallback.current();
    }, delay);
    
    return () => clearInterval(id);
  }, [delay]);
}

// Usage
function Timer() {
  const [count, setCount] = useState(0);
  
  useInterval(() => {
    setCount(c => c + 1);
  }, 1000);
  
  return <div>Count: {count}</div>;
}

Common custom hook patterns include data fetching, local storage, window size, intervals, and more. These patterns encapsulate reusable logic that multiple components can use.

// Simple hooks
function useCounter(initial = 0) {
  const [count, setCount] = useState(initial);
  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  return { count, increment, decrement };
}

function useToggle(initial = false) {
  const [value, setValue] = useState(initial);
  const toggle = () => setValue(v => !v);
  return { value, toggle };
}

// Composed hook
function useCounterWithToggle(initialCount = 0) {
  const counter = useCounter(initialCount);
  const toggle = useToggle();
  
  const reset = () => {
    counter.setCount(initialCount);
    toggle.setFalse();
  };
  
  return {
    ...counter,
    isActive: toggle.value,
    toggleActive: toggle.toggle,
    reset
  };
}

// Complex composition
function useUserProfile(userId) {
  const { data: user, loading, error } = useFetch(`/api/users/${userId}`);
  const [preferences, setPreferences] = useLocalStorage(`user-${userId}-prefs`, {});
  const { width } = useWindowSize();
  
  const updatePreferences = (newPrefs) => {
    setPreferences({ ...preferences, ...newPrefs });
  };
  
  const isMobile = width < 768;
  
  return {
    user,
    loading,
    error,
    preferences,
    updatePreferences,
    isMobile
  };
}

// Usage
function ProfilePage({ userId }) {
  const {
    user,
    loading,
    preferences,
    updatePreferences,
    isMobile
  } = useUserProfile(userId);
  
  if (loading) return <div>Loading...</div>;
  
  return (
    <div className={isMobile ? 'mobile' : 'desktop'}>
      <h1>{user.name}</h1>
      {/* ... */}
    </div>
  );
}

// Hook that uses other hooks
function usePaginatedData(url, pageSize = 10) {
  const [page, setPage] = useState(1);
  const { data, loading, error } = useFetch(`${url}?page=${page}&limit=${pageSize}`);
  
  const nextPage = () => setPage(p => p + 1);
  const prevPage = () => setPage(p => Math.max(1, p - 1));
  
  return {
    data,
    loading,
    error,
    page,
    nextPage,
    prevPage,
    hasNext: data?.hasMore || false
  };
}

Compose custom hooks by calling other hooks inside them. This allows building complex functionality from simpler pieces. Keep hooks focused and compose them for more complex use cases.

// Custom hook to test
function useCounter(initial = 0) {
  const [count, setCount] = useState(initial);
  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  return { count, increment, decrement };
}

// Test using renderHook
import { renderHook, act } from '@testing-library/react-hooks';

describe('useCounter', () => {
  it('should initialize with value', () => {
    const { result } = renderHook(() => useCounter(5));
    expect(result.current.count).toBe(5);
  });
  
  it('should increment count', () => {
    const { result } = renderHook(() => useCounter(0));
    
    act(() => {
      result.current.increment();
    });
    
    expect(result.current.count).toBe(1);
  });
  
  it('should decrement count', () => {
    const { result } = renderHook(() => useCounter(5));
    
    act(() => {
      result.current.decrement();
    });
    
    expect(result.current.count).toBe(4);
  });
});

// Testing hook with dependencies
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData).finally(() => setLoading(false));
  }, [url]);
  
  return { data, loading };
}

// Mock fetch for testing
global.fetch = jest.fn();

describe('useFetch', () => {
  it('should fetch data', async () => {
    const mockData = { id: 1, name: 'Test' };
    fetch.mockResolvedValueOnce({
      json: async () => mockData
    });
    
    const { result, waitForNextUpdate } = renderHook(() => 
      useFetch('/api/test')
    );
    
    expect(result.current.loading).toBe(true);
    
    await waitForNextUpdate();
    
    expect(result.current.loading).toBe(false);
    expect(result.current.data).toEqual(mockData);
  });
});

Test custom hooks using renderHook from React Testing Library. Use act() for state updates, mock external dependencies, and test all return values and side effects.

// ✅ GOOD: Focused, single responsibility
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    
    return () => clearTimeout(handler);
  }, [value, delay]);
  
  return debouncedValue;
}

// ✅ GOOD: Return object for flexibility
function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});
  
  const setValue = (name, value) => {
    setValues(prev => ({ ...prev, [name]: value }));
  };
  
  const setError = (name, error) => {
    setErrors(prev => ({ ...prev, [name]: error }));
  };
  
  const reset = () => {
    setValues(initialValues);
    setErrors({});
  };
  
  return {
    values,
    errors,
    setValue,
    setError,
    reset
  };
}

// ✅ GOOD: Handle edge cases
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    if (typeof window === 'undefined') {
      return initialValue; // SSR safety
    }
    
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(`Error reading localStorage key "${key}":`, error);
      return initialValue;
    }
  });
  
  const setValue = (value) => {
    try {
      setStoredValue(value);
      if (typeof window !== 'undefined') {
        window.localStorage.setItem(key, JSON.stringify(value));
      }
    } catch (error) {
      console.error(`Error setting localStorage key "${key}":`, error);
    }
  };
  
  return [storedValue, setValue];
}

// ✅ GOOD: Document with JSDoc
/**
 * Custom hook for managing a counter
 * @param {number} initialValue - Initial counter value
 * @returns {Object} Object with count, increment, decrement, and reset
 */
function useCounter(initialValue = 0) {
  // Implementation
}

// ✅ GOOD: Use useCallback for stable references
function useApiCall(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  
  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const response = await fetch(url);
      const data = await response.json();
      setData(data);
    } finally {
      setLoading(false);
    }
  }, [url]);
  
  return { data, loading, fetchData };
}

Follow best practices: keep hooks focused, return appropriate structures, handle edge cases, provide cleanup, and document your hooks. Use useCallback/useMemo when needed for performance.