React Best Practices

Skill Profile

(Select at least one profile to enable specific modules)

Overview

React is a JavaScript library for building user interfaces using component-based architecture and virtual DOM for optimal performance. React 18+ introduces features including functional components with hooks, custom hooks for reusable logic, Context API for global state, Suspense for async rendering, and concurrent features for improved performance. Following best practices ensures maintainable, testable, and performant React applications.

Why This Matters

Reduces Development Time: Component reuse and hooks reduce development time
Increases Maintainability: Organized code reduces maintenance costs
Improves Performance: Virtual DOM and optimizations enhance performance
Enhances User Experience: Fast rendering and smooth interactions
Improves Code Quality: TypeScript and patterns enhance code quality

Core Concepts & Rules

1. Core Principles

Follow established patterns and conventions
Maintain consistency across codebase
Document decisions and trade-offs

2. Implementation Guidelines

Start with the simplest viable solution
Iterate based on feedback and requirements
Test thoroughly before deployment

Inputs / Outputs / Contracts

Inputs:
- Component requirements
- State management needs
- Performance requirements
- Accessibility guidelines
Entry Conditions:
- React 16+ is available
- TypeScript is configured
- Testing framework is set up
- Performance baseline is measured
Outputs:
- Functional React components
- Custom hooks for reusable logic
- State management strategy
- Performance-optimized code
Artifacts Required (Deliverables):
- Component library
- Custom hooks
- State management setup
- Test suite
Acceptance Evidence:
- Components render correctly
- State management works
- Performance targets met
- Tests pass
Success Criteria:
- Components are reusable and composable
- State is managed correctly
- Performance is optimized
- Code is maintainable

Skill Composition

Depends on: typescript-standards
Compatible with: nextjs-patterns, shadcn-ui, form-handling
Conflicts with: None
Related Skills: state-management, error-boundaries-react

Quick Start / Implementation Example

Review requirements and constraints
Set up development environment
Implement core functionality following patterns
Write tests for critical paths
Run tests and fix issues
Document any deviations or decisions

# Example implementation following best practices
def example_function():
    # Your implementation here
    pass

Assumptions / Constraints / Non-goals

Assumptions:
- Development environment is properly configured
- Required dependencies are available
- Team has basic understanding of domain
Constraints:
- Must follow existing codebase conventions
- Time and resource limitations
- Compatibility requirements
Non-goals:
- This skill does not cover edge cases outside scope
- Not a replacement for formal training

Compatibility & Prerequisites

Supported Versions:
- Python 3.8+
- Node.js 16+
- Modern browsers (Chrome, Firefox, Safari, Edge)
Required AI Tools:
- Code editor (VS Code recommended)
- Testing framework appropriate for language
- Version control (Git)
Dependencies:
- Language-specific package manager
- Build tools
- Testing libraries
Environment Setup:
- .env.example keys: API_KEY, DATABASE_URL (no values)

Test Scenario Matrix (QA Strategy)

Type	Focus Area	Required Scenarios / Mocks
Unit	Core Logic	Must cover primary logic and at least 3 edge/error cases. Target minimum 80% coverage
Integration	DB / API	All external API calls or database connections must be mocked during unit tests
E2E	User Journey	Critical user flows to test
Performance	Latency / Load	Benchmark requirements
Security	Vuln / Auth	SAST/DAST or dependency audit
Frontend	UX / A11y	Accessibility checklist (WCAG), Performance Budget (Lighthouse score)

Technical Guardrails & Security Threat Model

1. Security & Privacy (Threat Model)

Top Threats: Injection attacks, authentication bypass, data exposure

Data Handling: Sanitize all user inputs to prevent Injection attacks. Never log raw PII
Secrets Management: No hardcoded API keys. Use Env Vars/Secrets Manager
Authorization: Validate user permissions before state changes

2. Performance & Resources

Execution Efficiency: Consider time complexity for algorithms
Memory Management: Use streams/pagination for large data
Resource Cleanup: Close DB connections/file handlers in finally blocks

3. Architecture & Scalability

Design Pattern: Follow SOLID principles, use Dependency Injection
Modularity: Decouple logic from UI/Frameworks

4. Observability & Reliability

Logging Standards: Structured JSON, include trace IDs request_id
Metrics: Track error_rate, latency, queue_depth
Error Handling: Standardized error codes, no bare except
Observability Artifacts:
- Log Fields: timestamp, level, message, request_id
- Metrics: request_count, error_count, response_time
- Dashboards/Alerts: High Error Rate > 5%

Agent Directives & Error Recovery

(ข้อกำหนดสำหรับ AI Agent ในการคิดและแก้ปัญหาเมื่อเกิดข้อผิดพลาด)

Thinking Process: Analyze root cause before fixing. Do not brute-force.
Fallback Strategy: Stop after 3 failed test attempts. Output root cause and ask for human intervention/clarification.
Self-Review: Check against Guardrails & Anti-patterns before finalizing.
Output Constraints: Output ONLY the modified code block. Do not explain unless asked.

Definition of Done (DoD) Checklist

Tests passed + coverage met
Lint/Typecheck passed
Logging/Metrics/Trace implemented
Security checks passed
Documentation/Changelog updated
Accessibility/Performance requirements met (if frontend)

Anti-patterns / Pitfalls

⛔ Don't: Log PII, catch-all exception, N+1 queries
⚠️ Watch out for: Common symptoms and quick fixes
💡 Instead: Use proper error handling, pagination, and logging

Reference Links & Examples

Internal documentation and examples
Official documentation and best practices
Community resources and discussions

Versioning & Changelog

Version: 1.0.0
Changelog:
- 2026-02-22: Initial version with complete template structure