react-best-practices
Use when reading or writing React components (.tsx, .jsx files with React imports).
Security Assessment
About react-best-practices
The 'react-best-practices' skill provides developers with structured guidance on writing efficient and maintainable React components in .tsx and .jsx files. It is designed to help developers avoid common pitfalls associated with React's component lifecycle, state management, and effect usage. By emphasizing core principles such as treating effects as escape hatches and promoting a calculation-first approach for derived state, this skill ensures that React applications remain performant and predictable. It encourages pairing with TypeScript to leverage strong typing, validation, and type-driven development patterns, enhancing overall code safety and readability.
Key features of this skill include clear guidelines on when and how to use effects, refs, and custom hooks. It provides a decision tree for choosing the appropriate React mechanism for different scenarios, such as responding to user interactions, performing expensive calculations, or synchronizing with external systems. The skill also details best practices for component patterns, including controlled versus uncontrolled components, composition over prop drilling, and the use of context for scoped state management. Additionally, it covers the proper use of refs, including dynamic lists and limiting parent access via 'useImperativeHandle', and emphasizes focused, reusable custom hooks.
This skill is particularly useful for React developers who aim to write maintainable, high-performance applications with TypeScript integration. It is ideal for both individual developers and teams seeking consistent coding standards, especially when building complex UI components or applications that interact with external systems. By following the guidance provided, users can minimize unnecessary renders, avoid common anti-patterns, and create a more predictable and testable React codebase.
FAQ
Can this skill be used without TypeScript?
While the skill can provide guidance for plain React, it is recommended to pair it with TypeScript to fully leverage type-first patterns, discriminated unions, and validation, which enhance code safety and maintainability.
When should I use effects in my React components?
Effects should be used only to synchronize with external systems, such as browser APIs, third-party libraries, or non-React DOM elements. Most component logic should avoid using effects when possible.
How should I manage derived or expensive state calculations?
Derived state should be calculated during render, and expensive computations should use 'useMemo'. Avoid using effects for these scenarios to prevent unnecessary re-renders and maintain predictable behavior.
Is this skill compatible with custom hooks?
Yes, the skill provides guidance for creating focused, reusable custom hooks. Each call should maintain an independent state instance, and hooks should be named 'useXxx' only if they internally call other hooks.
Are there limitations when using refs?
Refs should be used only for values that do not affect rendering. They should not be read or written during render, and dynamic lists should use ref callbacks instead of 'useRef' in loops.
Install react-best-practices
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
0xbigboss/claude-code