Правила декомпозиции React-компонентов

1. Структура компонентов

• Используйте паттерн композиции через объект (например, UserTable.Root, UserTable.Actions)
• Группируйте связанные компоненты в одном файле, если они тесно связаны
• Разделяйте большие компоненты на логические части (форма, поиск, таблица)

2. Типизация и валидация

• Определяйте схемы валидации с помощью Zod в начале файла
• Экспортируйте типы и схемы для переиспользования
• Используйте строгую типизацию для всех пропсов и состояний

3. Формы и контексты

• Создавайте отдельные контексты для форм с помощью createFormContext
• Выносите логику валидации в схемы
• Разделяйте форму на отдельные компоненты для каждого поля или логически неразделяемого набора полей

4. Компоненты таблиц

• Выносите конфигурацию колонок в отдельный хук
• Разделяйте действия (Actions) на отдельные компоненты
• Используйте контекст для передачи данных в действия
• Обрабатывайте состояния загрузки и мутации

5. Поиск и фильтрация

• Используйте дебаунс для поисковых запросов
• Разделяйте логику фильтрации на отдельные компоненты
• Храните состояние фильтров в форме

6. Именование и организация

• Используйте префиксы для связанных файлов (user.form.tsx, user.table.tsx)
• Группируйте связанные компоненты в одной директории
• Экспортируйте компоненты через объект для лучшей организации

7. Обработка ошибок и состояний

• Добавляйте проверки на существование контекста
• Обрабатывайте все возможные состояния (загрузка, ошибка, пустые данные)
• Используйте типизированные схемы для валидации данных

8. Переиспользование

• Создавайте общие компоненты для повторяющихся элементов
• Выносите общую логику в хуки
• Используйте константы для повторяющихся значений

9. Пропсы и параметры

• Типизируйте все пропсы компонентов
• Используйте деструктуризацию для пропсов
• Документируйте обязательные и опциональные параметры

10. Стилизация и UI

• Используйте компоненты UI библиотеки последовательно
• Группируйте стилевые пропсы
• Поддерживайте единообразие в использовании компонентов