Как ответить
Я использовал React для разработки фронтенда интернет-магазина в учебном проекте (команда из 3 человек, двухнедельный спринт). Моя основная задача — реализовать страницу каталога товаров с фильтрацией по категории и цене, а также пагинацией. Для этого я применил функциональные компоненты, хуки useState и useEffect для управления состоянием фильтров и подгрузки данных с REST API (json-server).
- Создал компонент FilterBar с выпадающими списками и ползунком цены, данные фильтров хранил в родительском компоненте через поднятие состояния.
- Реализовал пагинацию через query-параметры React Router — при переключении страницы URL менялся, что позволяло сохранять состояние при перезагрузке.
- Столкнулся с проблемой: при каждом изменении фильтра происходил полный ререндер списка товаров. Использовал React.memo для компонента карточки товара и useMemo для вычисления отфильтрованного массива — это сократило время рендеринга с 120 мс до 40 мс на 200 товарах.
- Добавил загрузчик (spinner) через условный рендеринг, пока данные с API не получены.
- Работали по Git Flow, делали code review через pull requests. Я отвечал за свою ветку, писал осмысленные commit messages.
В итоге страница каталога работала стабильно, фильтры обновлялись без задержек, а пагинация корректно обрабатывала краевые случаи (пустой результат, последняя страница). Этот опыт закрепил мои знания по управлению состоянием, оптимизации и командной разработке.