react_skill

Overview

This skill captures practical React component patterns, hooks best practices, state management guidance, and performance optimization rules for building robust, maintainable UIs. It focuses on secure rendering, predictable hooks usage, accessible semantics, and scalable component design. The guidance is actionable and geared toward everyday developer workflows and code reviews.

How this skill works

The skill inspects common React pitfalls and prescribes concrete rules: sanitize user input, enforce hook discipline, prefer local and derived state, and apply memoization where needed. It also recommends accessibility standards, testing strategies, error handling, type safety, styling conventions, dependency hygiene, and documentation practices. Use it as a checklist during development, pull request reviews, or when designing reusable components and hooks.

When to use it

• During code reviews to catch security, hooks, and performance issues
• When designing new components, hooks, or state management solutions
• Refactoring to reduce re-renders or remove redundant state
• Onboarding developers to a React codebase or establishing team conventions
• Prioritizing accessibility and testing before release

Best practices

• Never render untrusted input directly; sanitize or escape to prevent XSS
• Call hooks only at the top level; name custom hooks with a use prefix
• Keep state local when possible; derive values instead of storing them
• Use useMemo and useCallback to stabilize expensive computations and callbacks
• Prefer composition and controlled components; avoid deep prop drilling

Example use cases

• Reviewing a component that accepts rich user content to ensure proper sanitization
• Refactoring a form to use controlled inputs and useReducer for complex logic
• Optimizing a frequently re-rendered list with React.memo and stable props
• Designing a compound component (parent + stateless children) for a complex widget
• Adding tests for custom hooks and key user interactions using testing-library