Здарова, работяги!

Недавно vercel выкатили скилзы правильного использования React и React Native для агентов, чтобы они правильно писали код за нас 🤣

Давайте посмотрим внимательнее, что они советуют. Пост будет из нескольких сообщений, тк в одно все не влезло.

Правила делятся на 8 категорий, упорядоченных по приоритету:

1) Eliminating Waterfalls (префикс файла: `async-`)
- Критичность: CRITICAL
- Суть: устранение последовательных await-операций — главный убийца производительности. Каждый последовательный await добавляет ещё один RTT/latency к критическому пути.

2) Bundle Size Optimization (префикс файла: `bundle-`)
- Критичность: CRITICAL
- Суть: уменьшение размера начального бандла улучшает Time to Interactive и Largest Contentful Paint.

3) Server-Side Performance (префикс файла: `server-`)
- Критичность: HIGH
- Суть: оптимизация серверного рендеринга и загрузки данных устраняет серверные водопады и уменьшает время ответа.

4) Client-Side Data Fetching (префикс файла: `client-`)
- Критичность: MEDIUM-HIGH
- Суть: автоматическая дедупликация и эффективные паттерны загрузки данных уменьшают избыточные сетевые запросы.

5) Re-render Optimization (префикс файла: `rerender-`)
- Критичность: MEDIUM
- Суть: уменьшение ненужных ре-рендеров минимизирует лишние вычисления и улучшает отзывчивость UI.

6) Rendering Performance (префикс файла: `rendering-`)
- Критичность: MEDIUM
- Суть: оптимизация процесса рендеринга уменьшает работу браузера.

7) JavaScript Performance (префикс файла: `js-`)
- Критичность: LOW-MEDIUM
- Суть: микро-оптимизации для горячих путей могут накопиться в значительные улучшения.

8) Advanced Patterns (префикс файла: `advanced-`)
- Критичность: LOW
- Суть: продвинутые паттерны для специфических случаев, требующие аккуратной реализации.

Начнем с первой категории ⬇️