Building Custom React Hooks

Custom hooks extract and share component logic. Here's how to build them effectively.

Basic Custom Hook#

import { useState, useEffect } from 'react';

// Convention: start with "use"
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, height } = useWindowSize();

  return (
    <div>
      Window: {width} x {height}
      {width < 768 && <MobileNav />}
    </div>
  );
}

Hook with Parameters#

function useLocalStorage<T>(key: string, initialValue: T) {
  // Lazy initialization
  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.error(error);
      return initialValue;
    }
  });

  // Update localStorage when state changes
  const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      if (typeof window !== 'undefined') {
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
      }
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue] as const;
}

// Usage
function Settings() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  const [fontSize, setFontSize] = useLocalStorage('fontSize', 16);

  return (
    <div>
      <select value={theme} onChange={(e) => setTheme(e.target.value)}>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
      </select>
    </div>
  );
}

Async Hook with Loading State#

interface AsyncState<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
}

function useAsync<T>(asyncFn: () => Promise<T>, deps: any[] = []) {
  const [state, setState] = useState<AsyncState<T>>({
    data: null,
    loading: true,
    error: null,
  });

  useEffect(() => {
    let isMounted = true;

    setState({ data: null, loading: true, error: null });

    asyncFn()
      .then((data) => {
        if (isMounted) {
          setState({ data, loading: false, error: null });
        }
      })
      .catch((error) => {
        if (isMounted) {
          setState({ data: null, loading: false, error });
        }
      });

    return () => {
      isMounted = false;
    };
  }, deps);

  return state;
}

// Usage
function UserProfile({ userId }: { userId: string }) {
  const { data: user, loading, error } = useAsync(
    () => fetchUser(userId),
    [userId]
  );

  if (loading) return <Spinner />;
  if (error) return <Error message={error.message} />;
  return <Profile user={user!} />;
}

Hook Composition#

// Base hooks
function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  const toggle = useCallback(() => setValue((v) => !v), []);
  const setOn = useCallback(() => setValue(true), []);
  const setOff = useCallback(() => setValue(false), []);

  return { value, toggle, setOn, setOff };
}

function useClickOutside(
  ref: React.RefObject<HTMLElement>,
  handler: () => void
) {
  useEffect(() => {
    const listener = (event: MouseEvent | TouchEvent) => {
      if (!ref.current || ref.current.contains(event.target as Node)) {
        return;
      }
      handler();
    };

    document.addEventListener('mousedown', listener);
    document.addEventListener('touchstart', listener);

    return () => {
      document.removeEventListener('mousedown', listener);
      document.removeEventListener('touchstart', listener);
    };
  }, [ref, handler]);
}

// Composed hook
function useDropdown() {
  const { value: isOpen, toggle, setOff } = useToggle(false);
  const ref = useRef<HTMLDivElement>(null);

  useClickOutside(ref, setOff);

  useEffect(() => {
    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        setOff();
      }
    };

    if (isOpen) {
      document.addEventListener('keydown', handleEscape);
    }

    return () => {
      document.removeEventListener('keydown', handleEscape);
    };
  }, [isOpen, setOff]);

  return { ref, isOpen, toggle, close: setOff };
}

// Usage
function Dropdown() {
  const { ref, isOpen, toggle, close } = useDropdown();

  return (
    <div ref={ref}>
      <button onClick={toggle}>Menu</button>
      {isOpen && (
        <ul>
          <li onClick={close}>Item 1</li>
          <li onClick={close}>Item 2</li>
        </ul>
      )}
    </div>
  );
}

Reducer-Based Hook#

interface FormState<T> {
  values: T;
  errors: Partial<Record<keyof T, string>>;
  touched: Partial<Record<keyof T, boolean>>;
  isSubmitting: boolean;
}

type FormAction<T> =
  | { type: 'SET_FIELD'; field: keyof T; value: T[keyof T] }
  | { type: 'SET_ERROR'; field: keyof T; error: string }
  | { type: 'TOUCH_FIELD'; field: keyof T }
  | { type: 'SUBMIT_START' }
  | { type: 'SUBMIT_END' }
  | { type: 'RESET'; initialValues: T };

function formReducer<T>(
  state: FormState<T>,
  action: FormAction<T>
): FormState<T> {
  switch (action.type) {
    case 'SET_FIELD':
      return {
        ...state,
        values: { ...state.values, [action.field]: action.value },
      };
    case 'SET_ERROR':
      return {
        ...state,
        errors: { ...state.errors, [action.field]: action.error },
      };
    case 'TOUCH_FIELD':
      return {
        ...state,
        touched: { ...state.touched, [action.field]: true },
      };
    case 'SUBMIT_START':
      return { ...state, isSubmitting: true };
    case 'SUBMIT_END':
      return { ...state, isSubmitting: false };
    case 'RESET':
      return {
        values: action.initialValues,
        errors: {},
        touched: {},
        isSubmitting: false,
      };
    default:
      return state;
  }
}

function useForm<T extends Record<string, any>>(
  initialValues: T,
  validate: (values: T) => Partial<Record<keyof T, string>>,
  onSubmit: (values: T) => Promise<void>
) {
  const [state, dispatch] = useReducer(formReducer<T>, {
    values: initialValues,
    errors: {},
    touched: {},
    isSubmitting: false,
  });

  const handleChange = useCallback((field: keyof T, value: T[keyof T]) => {
    dispatch({ type: 'SET_FIELD', field, value });
  }, []);

  const handleBlur = useCallback((field: keyof T) => {
    dispatch({ type: 'TOUCH_FIELD', field });

    const errors = validate(state.values);
    if (errors[field]) {
      dispatch({ type: 'SET_ERROR', field, error: errors[field]! });
    }
  }, [state.values, validate]);

  const handleSubmit = useCallback(async (e: React.FormEvent) => {
    e.preventDefault();

    const errors = validate(state.values);
    const hasErrors = Object.keys(errors).length > 0;

    if (hasErrors) {
      Object.entries(errors).forEach(([field, error]) => {
        dispatch({ type: 'SET_ERROR', field: field as keyof T, error: error! });
      });
      return;
    }

    dispatch({ type: 'SUBMIT_START' });
    try {
      await onSubmit(state.values);
    } finally {
      dispatch({ type: 'SUBMIT_END' });
    }
  }, [state.values, validate, onSubmit]);

  return {
    ...state,
    handleChange,
    handleBlur,
    handleSubmit,
    reset: () => dispatch({ type: 'RESET', initialValues }),
  };
}

Testing Custom Hooks#

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

// Test useCounter
describe('useCounter', () => {
  it('should initialize with default value', () => {
    const { result } = renderHook(() => useCounter(0));
    expect(result.current.count).toBe(0);
  });

  it('should increment', () => {
    const { result } = renderHook(() => useCounter(0));

    act(() => {
      result.current.increment();
    });

    expect(result.current.count).toBe(1);
  });

  it('should handle props changes', () => {
    const { result, rerender } = renderHook(
      ({ initialValue }) => useCounter(initialValue),
      { initialProps: { initialValue: 0 } }
    );

    expect(result.current.count).toBe(0);

    rerender({ initialValue: 10 });
    // Depends on hook implementation
  });
});

// Test async hook
describe('useAsync', () => {
  it('should handle loading state', async () => {
    const mockFetch = jest.fn().mockResolvedValue({ data: 'test' });

    const { result } = renderHook(() => useAsync(mockFetch, []));

    expect(result.current.loading).toBe(true);

    await waitFor(() => {
      expect(result.current.loading).toBe(false);
      expect(result.current.data).toEqual({ data: 'test' });
    });
  });
});

Best Practices#

Naming:
✓ Start with "use" prefix
✓ Be descriptive
✓ Match React conventions
✓ Indicate return type

Design:
✓ Single responsibility
✓ Return stable references
✓ Handle cleanup
✓ Support SSR

Performance:
✓ Memoize callbacks
✓ Use lazy initialization
✓ Avoid unnecessary effects
✓ Handle race conditions

Testing:
✓ Test in isolation
✓ Test all states
✓ Test cleanup
✓ Test edge cases

Custom hooks encapsulate reusable logic cleanly. Start simple, compose smaller hooks into larger ones, and always handle cleanup. Test hooks in isolation using renderHook and consider all states: loading, success, error, and edge cases.