react-development_skill

Overview

This skill delivers practical, production-focused React development guidance based on official React patterns. It covers functional components, hooks (useState, useEffect, useContext, useReducer, useMemo, useCallback), state and props, side effects, and performance optimizations for modern single-page applications.

How this skill works

I explain core concepts, show concise code patterns, and recommend safe defaults for common scenarios. The skill inspects component structure, hook usage, and state flows, then suggests refactors for readability, performance, and predictable side-effect handling. It emphasizes small, reusable examples you can drop into projects and adapt to real APIs and forms.

When to use it

• Building or refactoring single-page applications with functional components and hooks
• Creating reusable UI components, component libraries, or design system primitives
• Managing local and global state with hooks, context, or useReducer
• Implementing data fetching, form handling, timers, and other side effects
• Optimizing render performance and preventing unnecessary re-renders

Best practices

• Prefer small, focused components and lift state only when multiple children need it
• Use useEffect for side effects with clear dependency arrays and cleanup functions
• Use useMemo and useCallback to stabilize expensive computations and handlers when necessary, not preemptively
• Favor useReducer for complex state transitions and keep reducers pure and testable
• Provide context providers near the top-level for cross-cutting concerns and avoid overusing context for frequently changing values

Example use cases

• Converting class components into hooks-based functional components for simpler lifecycle management
• Building a paginated data list that fetches on dependency changes and cancels stale requests
• Implementing a theme and user context to avoid prop drilling across many nested components
• Creating a todo or task app using useReducer to manage add/change/delete flows
• Optimizing a product list rendering by memoizing filtering and sorting logic with useMemo