playbooks

home / skills / partme-ai / full-stack-skills / react-hooks

react-hooks skill

/skills/react-hooks

This skill guides you through React Hooks usage, patterns, and custom hooks to build performant, maintainable functional components.

npx playbooks add skill partme-ai/full-stack-skills --skill react-hooks

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
709 B
---
name: react-hooks
description: Provides comprehensive guidance for React Hooks including useState, useEffect, useContext, useReducer, useMemo, useCallback, custom hooks, and hook patterns. Use when the user asks about React Hooks, needs to use hooks in functional components, create custom hooks, or optimize hook performance.
license: Complete terms in LICENSE.txt
---

## When to use this skill

Use this skill whenever the user wants to:
- [待完善：根据具体工具添加使用场景]

## How to use this skill

[待完善：根据具体工具添加使用指南]

## Best Practices

[待完善：根据具体工具添加最佳实践]

## Keywords

[待完善：根据具体工具添加关键词]

Overview

This skill provides comprehensive, practical guidance on React Hooks for building and optimizing functional components. It covers core hooks (useState, useEffect, useContext, useReducer), performance hooks (useMemo, useCallback), custom hook patterns, and migration tips from class components. The content focuses on actionable examples, common pitfalls, and performance trade-offs.

How this skill works

I explain what each hook does, when to choose it, and show concise code patterns for real-world scenarios. I provide step-by-step guidance for creating and testing custom hooks, managing side effects, and avoiding stale closures and unnecessary re-renders. The guidance includes debugging tips, dependency rules, and strategies to keep hooks predictable and maintainable.

When to use it

  • Migrating class components to functional components with hooks
  • Managing local component state and derived state efficiently
  • Coordinating side effects like data fetching, subscriptions, and timers
  • Sharing reusable logic across components via custom hooks
  • Optimizing render performance in large component trees

Best practices

  • Keep hooks at the top level of components and custom hooks to follow rules of hooks
  • Specify complete dependency arrays for useEffect/useCallback/useMemo and prefer ESLint to enforce them
  • Use useReducer for complex state logic or when next state depends on previous state
  • Memoize only when measurable benefits exist; avoid premature optimization
  • Extract side effects into custom hooks to improve testability and reuse

Example use cases

  • useState and useEffect to fetch and display API data with loading/error handling
  • useReducer for a complex form with nested fields and validation logic
  • useContext to provide theme or auth state across the app without prop drilling
  • useMemo/useCallback to prevent expensive recalculations and reduce child re-renders
  • Custom hook that wraps WebSocket or subscription logic with automatic cleanup

FAQ

When should I prefer useReducer over useState?

Choose useReducer for complex state updates, multiple related state values, or when state transitions are best modeled with actions and a reducer function.

How do I avoid stale closures in useEffect callbacks?

Include all external values in the effect's dependency array or use refs to hold mutable values that shouldn't trigger re-runs; prefer stable callback identities via useCallback when needed.