React Hooks Skill

Expert assistance for implementing React hooks with advanced patterns, composition strategies, and performance optimization.

Capabilities

• Design and implement custom hooks with proper abstractions
• Compose hooks for complex state and side effect management
• Optimize hook performance with memoization patterns
• Implement hooks for data fetching, subscriptions, and local storage
• Test custom hooks with React Testing Library
• Apply hooks rules and best practices

Usage

Invoke this skill when you need to:

• Create custom hooks for reusable logic
• Optimize existing hooks for performance
• Implement complex state logic with useReducer
• Build data fetching hooks with caching
• Create form handling hooks

Inputs

Configuration Example

{
  "hookName": "useDebounce",
  "purpose": "Debounce a value with configurable delay",
  "parameters": [
    { "name": "value", "type": "T" },
    { "name": "delay", "type": "number" }
  ],
  "returnType": "T"
}

Hook Patterns

State Management Hooks

// useReducer for complex state
function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  const toggle = useCallback(() => setValue(v => !v), []);
  const setTrue = useCallback(() => setValue(true), []);
  const setFalse = useCallback(() => setValue(false), []);
  return { value, toggle, setTrue, setFalse };
}

Effect Hooks

// useEffect with cleanup
function useEventListener<K extends keyof WindowEventMap>(
  eventName: K,
  handler: (event: WindowEventMap[K]) => void,
  element: Window | HTMLElement = window
) {
  const savedHandler = useRef(handler);

  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  useEffect(() => {
    const eventListener = (event: WindowEventMap[K]) => savedHandler.current(event);
    element.addEventListener(eventName, eventListener);
    return () => element.removeEventListener(eventName, eventListener);
  }, [eventName, element]);
}

Data Fetching Hooks

function useFetch<T>(url: string, options?: RequestInit) {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<Error | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const abortController = new AbortController();

    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch(url, {
          ...options,
          signal: abortController.signal,
        });
        if (!response.ok) throw new Error(response.statusText);
        const json = await response.json();
        setData(json);
      } catch (err) {
        if (err instanceof Error && err.name !== 'AbortError') {
          setError(err);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();
    return () => abortController.abort();
  }, [url]);

  return { data, error, loading };
}

Best Practices

• Always follow the Rules of Hooks
• Use the exhaustive-deps ESLint rule
• Memoize callbacks passed to child components
• Return stable references when possible
• Handle cleanup in useEffect properly
• Use refs for values that shouldn't trigger re-renders

Target Processes

• react-application-development
• custom-hooks-library
• state-management-setup
• performance-optimization
• frontend-testing