Vercel React Best Practices

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 57 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

Security Notice (Critical)

IMPORTANT: Code security must be maintained during performance optimization.

• Input Validation: User-supplied content (for serialization, code evaluation, or comments) must be escaped and validated. Always escape variables in output, especially when inserted into code or comments
• Template Variable Safety: Scan for and reject HTML comment patterns (<!-- -->). Require output auto-escaping when handling template variables like {{}}. Validate and sanitize all user-supplied or dynamic variables before insertion into code, templates, or client output using strict allow-lists and escaping functions
• Dynamic Output: The term "validate all dynamic output" means: 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 expose sensitive data when optimizing data serialization
• Sanitize user-supplied code before rendering or evaluation
• Avoid direct evaluation or insertion of code samples without validation

When to Apply