# React > React component patterns, hooks best practices, state management, and performance optimization - Skill: `yldgio/react` (Agent Skill) - Install (CLI): `npx skillmds add yldgio/react` - Raw SKILL.md: https://api.skillmd.com/api/skills/yldgio/react/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: yldgio (https://skillmd.com/u/yldgio) - Updated: 2026-09-10 - Page: https://skillmd.com/skills/yldgio/react --- ## 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](https://react.dev) ### 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