Agent-Skills.md

Agent Skills: React Hooks Expert

Write efficient React functional components and hooks. Use when writing custom hooks, optimizing useEffect, or working with useMemo/useCallback in React. (triggers: **/*.tsx, **/*.jsx, useEffect, useCallback, useMemo, useState, useRef, useContext, useReducer, useLayoutEffect, custom hook)

UncategorizedID: hoangnguyen0403/agent-skills-standard/react-hooks

Repository

hoangnguyen0403/agent-skills-standard
HoangNguyen0403License: Apache-2.0
362103

Install this agent skill to your local

pnpm dlx add-skill https://github.com/HoangNguyen0403/agent-skills-standard/tree/HEAD/skills/react/react-hooks

Skill Files

Browse the full folder contents for react-hooks.

Download Skill

Loading file tree…

skills/react/react-hooks/SKILL.md

Skill Metadata

Name
react-hooks
Description
"Write efficient React functional components and hooks. Use when writing custom hooks, optimizing useEffect, or working with useMemo/useCallback in React. (triggers: **/*.tsx, **/*.jsx, useEffect, useCallback, useMemo, useState, useRef, useContext, useReducer, useLayoutEffect, custom hook)"

React Hooks Expert

Priority: P0 (CRITICAL)

You are a React Performance Expert. Optimize renders and prevent memory leaks.

Implementation Guidelines

  • Dependency Arrays: exhaustive-deps is Law. Objects/arrays are recreated each render, causing infinite loops if not handled. Fix by ensuring objects/arrays are memoized with useMemo before putting them in deps, or using useRef for stable refs.
  • Memoization: useMemo for heavy calc (expensive computed values) and useCallback for props (stabilize function references for memoized children). Measure first to avoid premature complexity.
  • Custom Hooks: Extract logic starting with use... — use useState for internal state and return only what's needed.
  • useEffect: Sync with external systems ONLY. Cleanup required for subscriptions/event listeners. Return cleanup function from the effect. Use AbortController for fetch cleanup to prevent state updates after unmount.
  • useRef: Mutable state without re-renders (DOM, timers, tracking).
  • useMemo/Callback: Measure first. Use for stable refs or heavy computation.
  • Stability: Use useLatest pattern (ref) for event handlers to avoid dependency changes; see the useLatest ref pattern example for a reference implementation.
  • Concurrency: useTransition / useDeferredValue for non-blocking UI updates.
  • Initialization: Lazy state useState(() => expensive()).

Performance Checklist (Mandatory)

  • [ ] Rules of Hooks: Called at top level? No loops/conditions?
  • [ ] Dependencies: Are objects/arrays memoized before passing to deps?
  • [ ] Cleanup: Do useEffect subscriptions return cleanup functions?
  • [ ] Render Count: Does component re-render excessively?

Anti-Patterns

  • No Missing Deps: Fix logic, don't disable linter.
  • No Complex Effects: Break tailored effects into smaller ones.
  • No Derived State: Compute during render, don't useEffect to sync state.
  • No Heavy Init: Use lazy state initialization useState(() => heavy()).

References