playbooks

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

react skill

/skills/react

This skill provides comprehensive React guidance for building components, managing state and hooks, and optimizing performance in React applications.

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

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

Files (2)
SKILL.md
704 B
---
name: react
description: Provides comprehensive guidance for React development including components, JSX, props, state, hooks, context, performance optimization, and best practices. Use when the user asks about React, needs to create React components, implement hooks, manage component state, or build React applications.
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 for React development, covering components, JSX, props, state, hooks, context, and performance optimization. It helps you design, implement, and debug React components and full React applications with modern best practices. Use it to accelerate development, reduce bugs, and improve maintainability.

How this skill works

The skill inspects your requirements or code snippets and offers targeted recommendations: component structure, prop typing, state management patterns, and hook usage. It explains trade-offs and gives example code patterns for functional components, custom hooks, context providers, memoization, and testing approaches. It also highlights performance bottlenecks and suggests optimizations like memo, virtualization, and code-splitting.

When to use it

  • Creating new React components or refactoring existing ones
  • Implementing or debugging hooks, effects, and custom hook patterns
  • Choosing state management approach (local state, context, Redux, Zustand)
  • Improving performance and reducing re-renders
  • Designing component APIs with props and composition
  • Setting up testing strategy for unit and integration tests

Best practices

  • Prefer functional components and hooks over class components for new code
  • Keep components small and focused; lift state only when necessary
  • Use useCallback and useMemo sparingly and only when measurable re-render costs exist
  • Use Context for cross-cutting concerns, not as a replacement for local state
  • Write unit tests for pure logic and integration tests for component interactions
  • Profile performance with React DevTools and optimize critical render paths first

Example use cases

  • Build a reusable form component with controlled inputs, validation, and composable fields
  • Create a custom hook for data fetching with cancellation and caching behavior
  • Refactor a large component into smaller presentational and container components
  • Implement global theme or authentication state using Context and a provider
  • Optimize a list rendering by adding virtualization and memoized item components

FAQ

Should I use Context or Redux for global state?

Use Context for lightweight global concerns like theme or auth; choose Redux or other dedicated state libraries when you need structured global state, time-travel debugging, or predictable reducers for complex interactions.

When should I create a custom hook?

Create a custom hook to extract reusable logic between components, such as data fetching, form handling, or subscriptions. Keep hooks focused and side-effect aware.

How do I avoid unnecessary re-renders?

Avoid passing new object or function references as props each render; use memoization (React.memo, useCallback, useMemo) only where profiling shows benefit, and split large components into smaller ones.