Разработка каталога товаров с фильтрами в мобильном приложении
Каталог с фильтрами — это не «экран со списком и чекбоксами». Это управление состоянием нескольких независимых измерений (категория, цена, бренд, наличие, рейтинг), которые должны применяться мгновенно, сохраняться между сессиями и не ломать deep link'и. Именно здесь большинство команд спотыкается — не на вёрстке, а на архитектуре состояния.
Типичные проблемы
Потеря состояния фильтров. Пользователь выбрал три фильтра, перешёл на карточку товара, вернулся — каталог сбросился. Классика. В React Native это происходит, когда фильтры хранятся в локальном state компонента-экрана, а Navigator размонтирует его при переходе. Решение: вынести фильтры в глобальный стор — Zustand, Redux Toolkit или Recoil. На Flutter — InheritedWidget или Riverpod's StateNotifierProvider, который живёт выше Navigator в дереве виджетов.
Производительность при большом каталоге. FlatList в React Native начинает дёргаться при 500+ товарах с изображениями, если не настроен getItemLayout (фиксированная высота ячейки устраняет пересчёт layout), не выставлен windowSize (дефолт 21 — это 10 экранов выше и ниже вьюпорта, для тяжёлых ячеек снижаем до 5–7), и не подключён FlashList от Shopify вместо стандартного FlatList. FlashList использует переиспользование ячеек на уровне JS, что даёт реальный прирост на mid-range Android.
На Android с Jetpack Compose — LazyVerticalGrid с key по id товара и rememberLazyGridState для восстановления позиции скролла. Изображения через Coil с AsyncImage и memoryCachePolicy = CachePolicy.ENABLED.
Реализация фильтров. Самое трудоёмкое — не рендеринг фильтров, а их применение. Если фильтрация серверная, каждое изменение фильтра должно дебоунситься (300–500 мс), отменять предыдущий запрос (AbortController в RN, CancellationToken или Job.cancel() в Android coroutines) и показывать skeleton вместо пустого экрана во время загрузки.
Для клиентской фильтрации (когда весь каталог загружен заранее) используем memoization: useMemo / useCallback в RN, remember { derivedStateOf {} } в Compose. Без этого каждый ре-рендер пересчитывает 500 товаров по всем активным фильтрам.
Архитектура фильтров
FilterState {
categories: Set<string>
priceRange: { min: number, max: number }
brands: Set<string>
inStock: boolean
sortBy: 'price_asc' | 'price_desc' | 'rating' | 'new'
}
Такая структура легко сериализуется в URL query params для deep linking и в AsyncStorage/SharedPreferences для персистентности. Deep link вида myapp://catalog?category=shoes&brand=nike&price_max=5000 полностью восстанавливает состояние фильтров при открытии.
Компоненты и UX
Фильтры реализуем в bottom sheet (не full-screen modal, чтобы пользователь видел контекст каталога). В React Native — @gorhom/bottom-sheet с snapPoints. Количество активных фильтров показываем badge на кнопке «Фильтры».
Чипы активных фильтров над списком товаров с возможностью удалить каждый — обязательный элемент. Без них пользователь не понимает, почему видит 3 товара из 500.
Сортировка — отдельный ActionSheet или сегментный контрол, не смешиваем с фильтрами.
Из практики: интернет-магазин одежды, React Native + Redux Toolkit. Фильтр по размеру + цвету + бренду. После применения фильтров приложение зависало на 800 мс — пересчёт происходил синхронно в main thread при каждом нажатии чекбокса. Переработали: применение фильтров через createSelector с reselect, debounce 200 мс на изменение любого параметра, вычисление вынесли в useTransition (React 18) — интерфейс перестал блокироваться.
Сетка vs список
Предоставляем оба режима с сохранением выбора в AsyncStorage. В сетке — numColumns={2} с динамическим расчётом ширины карточки через Dimensions.get('window').width. На планшете автоматически переключаем на 3–4 колонки.
Что входит в работу
- Экран каталога с LazyList/FlatList/LazyVerticalGrid
- Bottom sheet с фильтрами: категории, диапазон цен (RangeSlider), мультивыбор, переключатели
- Чипы активных фильтров с возможностью сброса
- Сортировка с сохранением выбора
- Переключение вид «сетка / список»
- Интеграция с API: дебоунс, отмена запросов, skeleton-загрузка
- Пагинация или infinite scroll в каталоге
- Персистентность состояния фильтров между сессиями
- Deep linking на каталог с предустановленными фильтрами
Сроки
3–5 рабочих дней — зависит от количества типов фильтров, серверной или клиентской фильтрации и сложности дизайна карточки товара. Стоимость рассчитывается индивидуально после анализа требований и структуры API.