Agent skill

react-hooks

Deep expertise in React hooks patterns including custom hooks, composition, optimization, and testing strategies.

View SKILL.md on GitHub Repository
Stars 514
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/a5c-ai/babysitter/tree/main/library/specializations/web-development/skills/react-hooks

SKILL.md

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

Parameter Type Required Description
hookName string Yes Name of the hook (use prefix)
purpose string Yes What the hook should accomplish
parameters array No Input parameters for the hook
returnType string No Expected return value structure
dependencies array No External dependencies needed

Configuration Example

json
{
  "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

typescript
// 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

typescript
// 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

typescript
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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

a5c-ai/babysitter

gsd-tools

Central utility skill for GSD operations. Provides config parsing, slug generation, timestamps, path operations, and orchestrates calls to other specialized skills. Acts as the unified entry point that the original gsd-tools.cjs provided via its lib/ modules (commands, config, core, init).

514 31
Explore
a5c-ai/babysitter

model-profile-resolution

Resolve model profile (quality/balanced/budget) at orchestration start and map agents to specific models. Enables cost/quality tradeoffs by selecting appropriate AI models for each agent role.

514 31
Explore
a5c-ai/babysitter

verification-suite

Plan structure validation, phase completeness checks, reference integrity verification, and artifact existence confirmation. Provides the structured verification layer ensuring GSD artifacts are well-formed and complete.

514 31
Explore
a5c-ai/babysitter

state-management

STATE.md reading, writing, and field-level updates. Provides cross-session state persistence via .planning/STATE.md with structured fields for current task, completed phases, blockers, decisions, and quick tasks.

514 31
Explore
a5c-ai/babysitter

git-integration

Git commit patterns, formats, and conventions for GSD methodology. Provides atomic commits per task, structured commit messages, planning file commits, branch management, and milestone tag operations.

514 31
Explore
a5c-ai/babysitter

frontmatter-parsing

YAML frontmatter parsing and manipulation for .planning/ documents. Provides read, write, update, query, and validation operations on frontmatter blocks in GSD markdown artifacts.

514 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results