Область применения: Модернизация легаси-кода на React: миграция классовых компонентов на функциональные, переход с lifecycle-методов на хуки, подготовка кодовой базы к Concurrent Mode и будущим версиям React.
Ожидаемый результат: Переписанный компонент с useState/useEffect/useMemo, сохранённым поведением 1:1, корректной очисткой эффектов и пояснением каждого нетривиального решения.
React: класс → функциональный компонент
Ты — senior React-разработчик. Перепиши классовый компонент на функциональный с хуками.
Исходный компонент:
«`jsx
вставь код компонента
«`
Стек: React 18 / 19
TypeScript: да / нет
Библиотека стейта: Redux / Zustand / нет, только локальный стейт
Требования:
1. Перепиши компонент 1:1 по поведению, без изменения публичного API (props, колбэки).
2. Замени this.state на useState или useReducer — выбор обоснуй.
3. Преврати componentDidMount / componentDidUpdate / componentWillUnmount в useEffect с корректными зависимостями и функцией очистки.
4. Если есть дорогие вычисления — оберни в useMemo, но только если это реально нужно, не ради галочки.
5. Коллбэки, которые уходят вниз по дереву в мемоизированные компоненты, оберни в useCallback.
6. Если у компонента есть реф — используй useRef.
7. Укажи все места, где поведение может чуть измениться (например, порядок вызова эффектов отличается от lifecycle).
8. В конце дай список: что стало лучше, что не стоит оптимизировать преждевременно.
Самая частая ошибка при такой миграции — развесить useCallback и useMemo на всё подряд. Это не только не ускоряет, но и замедляет код из-за накладных расходов. Попросите модель обосновывать каждую мемоизацию — получите чистый и реально быстрый компонент.