Привет! Я учусь фронтенду, сделал небольшое приложение для себя (список пользователей с архивом и редактированием). Код выложил открыто. Прошу совета, а не готового решения.
Ссылка на репозиторий:
https://github.com/Arvik1982/MyUsersList
Стек проекта:
React 19
TypeScript
React Router v7 (Data Router API)
Zustand (клиентское состояние)
TanStack Query (серверное состояние)
React Hook Form + Zod
SCSS Modules
Vite
Основной функционал:
Главная страница с карточками пользователей (загрузка из API, первые 6)
Действия: редактирование, архив, скрытие, активация
Сохранение состояния в localStorage
Страница редактирования с валидацией и модальным окном
Что конкретно хотелось бы проверить:
Архитектура состояния — правильно ли разделены ответственности между TanStack Query (кэширование API-данных) и Zustand (UI-состояние: скрытые/архивированные карточки)? Нет ли конфликта или дублирования?
Маршрутизация — используется ли Data Router API правильно? Стоит ли переносить loader'ы для предзагрузки данных или текущий подход с TanStack Query внутри компонентов оптимальнее?
Типизация — насколько хорошо выстроены типы (особенно для пропсов и ответов API)? Есть ли any?
Работа с формами — корректно ли настроена валидация Zod и обработка ошибок?
Производительность — есть ли лишние ререндеры, правильно ли используются хуки (useMemo, useCallback, memo)?
Буду благодарен за любые замечания по:
читаемости кода
соблюдению best practices React/TS
возможным багам и уязвимостям
организации файлов и папок