- Vercel ने React और Next.js के 10+ वर्षों के performance optimization अनुभव पर आधारित संरचित repository
React-Best-Practices जारी की है
- यह repository AI agents और LLMs के लिए इस तरह डिज़ाइन की गई है कि वे code review या refactoring के दौरान एकसमान optimization निर्णय ले सकें
- इसका मुख्य फोकस waterfall हटाने और bundle size कम करने को प्राथमिकता देना है, और इसमें server, client और rendering performance तक कुल 8 categories शामिल हैं
- हर rule में importance level (CRITICAL~LOW) के साथ गलत code examples और उनके corrected examples शामिल हैं
- ये rules वास्तविक production cases में verified हैं, इसलिए coding agent integration के ज़रिए automated optimization support संभव है
React Best Practices का अवलोकन
react-best-practices एक ऐसी repository है जो React और Next.js के 10+ वर्षों में संचित optimization knowledge को समेटती है
- इसे इस तरह संरचित किया गया है कि AI agents और LLMs code analysis और improvement suggestions के समय इसे reference की तरह इस्तेमाल कर सकें
- React performance issues अक्सर release के बाद slowdown के लक्षणों पर प्रतिक्रिया देने वाले रूप में सामने आते हैं
- async tasks का sequential execution, बढ़ते client bundles, और unnecessary re-renders को इसके प्रमुख कारणों के रूप में बताया गया है
- ये समस्याएँ ऐसे structural bottlenecks बन जाती हैं जो हर user session पर दोहराई जाने वाली cost पैदा करती हैं
मुख्य विचार: priority-based optimization
- performance improvement की ज़्यादातर कोशिशें अक्सर stack के निचले स्तर से शुरू होकर विफल हो जाती हैं
- उदाहरण के लिए, अगर request waterfall 600ms extra जोड़ रहा है, तो
useMemo optimization का कोई खास मतलब नहीं रह जाता
- अगर हर page पर 300KB अनावश्यक JavaScript भेजी जा रही है, तो सूक्ष्म loop optimization असरदार नहीं होती
- framework दो मुख्य कदमों से शुरू होता है
- waterfall हटाना
- bundle size कम करना
- इसके बाद यह server performance, client data fetching, और re-render optimization की दिशा में आगे बढ़ता है
- कुल 8 categories और 40+ rules importance order में व्यवस्थित हैं
- CRITICAL स्तर में waterfall removal और bundle reduction शामिल हैं, जबकि LOW स्तर में advanced patterns आते हैं
शामिल प्रमुख categories
- repository निम्न 8 performance areas को कवर करती है
- async waterfall removal
- bundle size optimization
- server performance
- client data fetching
- re-render optimization
- rendering performance
- advanced patterns
- JavaScript performance
- हर rule impact level (CRITICAL~LOW) के साथ गलत code और corrected example देता है
- उदाहरण: अनावश्यक
await calls की वजह से हर branch में data का इंतज़ार करने वाला code → condition order बदलकर उसे केवल ज़रूरत पड़ने पर wait करने के लिए सुधारा गया
- सभी rule files को
AGENTS.md में compile किया जाता है, ताकि AI agents code review के दौरान सीधे इन्हें reference कर सकें
वास्तविक मामलों पर आधारित rule collection
- सभी rules वास्तविक production codebases में performance improvement के अनुभव पर आधारित हैं
- loop consolidation: message list को 8 बार scan करने वाले code को एक बार तक घटाकर large-scale data processing efficiency बढ़ाई गई
- async parallelization: जिन DB calls में dependency नहीं थी, उन्हें parallel चलाकर कुल wait time आधा कर दिया गया
- font fallback adjustment: system fonts इस्तेमाल करते समय letter spacing समायोजित कर fallback state में भी natural rendering बनाए रखी गई
coding agent integration
react-best-practices को Agent Skills package के रूप में उपलब्ध कराया गया है, इसलिए इसे अलग-अलग coding agents में install किया जा सकता है
- Opencode, Codex, Claude Code, Cursor आदि में इसका उपयोग संभव है
- अगर कोई agent nested
useEffect calls या heavy client imports detect करता है, तो वह संबंधित rules देखकर fix suggestions दे सकता है
- install command:
npx add-skill vercel-labs/agent-skills
- पूरी repository GitHub के
react-best-practices पर देखी जा सकती है
अभी कोई टिप्पणी नहीं है.