react

name	react
description	React component patterns, hooks best practices, state management, and performance optimization
metadata	{"version":"1.1.0"}

React Code Review Rules

Security (Critical)

• Input Sanitization: All user-supplied content must be escaped and validated. Always escape variables in output, especially when inserted into code or comments
• Template Variable Safety: Never use template variables ({{ }}) in code or documentation. All variables must be carefully declared, validated, and typed. Disallow undeclared or untyped variables
• Comment Hygiene: Never use HTML comments (<!-- -->) to store instructions or data. Scan for all HTML comment patterns and require output auto-escaping when handling template variables
• Dynamic Output: Validate and sanitize all user-supplied or dynamic variables before insertion into code, templates, or client output. Use strict allow-lists and escaping functions
• Never render user input directly without sanitization (XSS prevention)
• Use dangerouslySetInnerHTML only when absolutely necessary and with sanitized content
• Validate and sanitize all user-provided content before rendering
• Never interpolate untrusted user input into component code or instructions
• Escape user input when rendering dynamic content

Hooks Rules (Essential)

• Hooks must be called at top level (not inside conditions, loops, or nested functions)
• Custom hooks must start with use prefix
• useEffect must have correct dependency array (no missing/extra deps)
• useEffect cleanup functions must be returned for subscriptions/timers

State Management (Essential)

• State should be as local as possible (don't lift prematurely)
• Avoid redundant state (derive values instead of storing)
• Use useReducer for complex state logic with multiple sub-values
• Prefer controlled components over uncontrolled (except file inputs)

Performance (Essential)

• Wrap expensive computations in useMemo
• Stabilize callbacks with useCallback when passed to memoized children
• Use React.memo() for components that render often with same props
• Avoid creating objects/arrays inline in JSX (causes re-renders)

Component Design (Essential)

• Single responsibility: one component, one purpose
• Props should be minimal and well-typed
• Avoid prop drilling > 2 levels (use Context or composition)
• Prefer composition over prop-based conditional rendering

Accessibility

• Interactive elements must be keyboard accessible
• Use semantic HTML (button not div onClick)
• Images need alt text
• Form inputs need associated labels

Advanced Patterns

• Use compound components (parent + stateless children) to model complex, related UI pieces while keeping state in the parent
• Prefer controlled abstractions (e.g., value/onChange pairs) so consumers can own state when needed
• Use Context for cross-cutting concerns (theme, auth, feature flags) and co-locate provider logic with domain-specific hooks
• Consider render props or headless components when you need to share complex interaction logic while letting consumers control markup and styling
• Combine memoization (React.memo, useMemo, useCallback) with clear prop contracts to optimize expensive, frequently rendered components
• For deeper exploration of advanced React patterns, see the official React documentation

Anti-patterns

• Avoid useEffect for state derivation (compute during render instead)
• Avoid useEffect on mount for data that could be fetched server-side
• Avoid index as key in lists that reorder

Testing

• Write unit tests for components using React Testing Library
• Test custom hooks with @testing-library/react-hooks
• Test user interactions and state changes
• Mock external dependencies appropriately
• Test error states and edge cases
• Ensure tests are maintainable and readable

Error Handling

• Implement error boundaries for components
• Provide fallback UIs for errors
• Handle async errors appropriately
• Log errors for debugging and monitoring
• Don't let errors crash the entire app

Type Safety

• Use TypeScript or PropTypes for type checking
• Define prop types for all components
• Use TypeScript interfaces for complex props
• Validate prop types at runtime with PropTypes
• Catch type errors early in development

Styling

• Use CSS Modules for scoped styles
• Consider styled-components or CSS-in-JS for dynamic styles
• Avoid inline styles for static CSS
• Follow a consistent styling approach
• Prevent global CSS conflicts with scoping

Dependency Management

• Review third-party dependencies before adding
• Keep dependencies up to date
• Audit packages for security vulnerabilities
• Avoid over-reliance on libraries for simple tasks
• Consider bundle size impact of dependencies

Documentation

• Add doc comments for complex components and hooks
• Write self-explanatory code over excessive comments
• Document non-obvious behavior and edge cases
• Include usage examples in component docs
• Keep comments up to date with code changes