react-best-practices

بهینه‌سازی React و Next.js با الگوهای عملکردی اثبات‌شده از Vercel

این skill هنگام نوشتن، بازبینی یا refactor کردن کدهای React و Next.js، الگوهای بهینه‌سازی عملکرد را اعمال می‌کند. از طراحی کامپوننت و مدیریت rerender تا data fetching، حجم bundle و بهینه‌سازی rendering را بررسی می‌کند.

مجموعه‌ای از ۷۰ قانون اولویت‌بندی‌شده در ۸ دسته، پیشنهادهای عملی و قابل‌اجرا ارائه می‌دهد. برای هر مشکل، مسیر اصلاح کد و الگوهای مناسب را مشخص می‌کند تا برنامه سریع‌تر، مقیاس‌پذیرتر و نگه‌داری آن ساده‌تر باشد.

چه چیزی می‌گیرید

  • بازبینی کد React و Next.js بر اساس راهکارهای عملکردی Vercel
  • شناسایی rerenderهای غیرضروری و الگوهای نامناسب در ساخت کامپوننت
  • پیشنهادهای بهینه برای data fetching در سمت client و server
  • بررسی bundle، importها، rendering و عملکرد لیست‌های بزرگ
  • refactor پیشنهادی همراه با توضیح دلیل هر تغییر

برای چه کاری خوب است

  • توسعه‌دهندگانی که در حال ساخت یا refactor کردن پروژه‌های React و Next.js هستند
  • تیم‌هایی که با کندی صفحه، rerender زیاد یا bundle حجیم مواجه‌اند
  • بازبینی performance پیش از انتشار یک feature یا صفحهٔ جدید

برای چه کاری نیست

  • پروژه‌هایی که از React یا Next.js استفاده نمی‌کنند
  • کارهایی که فقط به تغییرات ظاهری یا طراحی UI بدون بررسی performance نیاز دارند

دربارهٔ این اسکیل

Vercel React Best Practices

Contains 70 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

  • Writing new React components or Next.js pages
  • Implementing data fetching (client or server-side)
  • Reviewing code for performance issues
  • Refactoring existing React/Next.js code

...

  • rerender-use-ref-transient-values - Use refs for transient frequent values
  • rerender-no-inline-components - Don't define components inside components

6. Rendering Performance (MEDIUM)

  • rendering-animate-svg-wrapper - Animate div wrapper, not SVG element
  • rendering-content-visibility - Use content-visibility for long lists

...

Read individual rule files for detailed explanations and code examples:

rules/async-parallel.md
rules/bundle-barrel-imports.md

Each rule file contains:

  • Brief explanation of why it matters
  • Incorrect code example with explanation
  • Correct code example with explanation
  • Additional context and references

Full Compiled Document

دانلود ZIP