<b>React ломается не в JSX, а в границах состояния, эффектов и ключей</b>

<b>React ломается не в JSX, а в границах состояния, эффектов и ключей</b>

За неделю в репах чаще всего всплывают одни и те же проблемы: компонент держит лишнее состояние, эффект делает и fetch, и синхронизацию, а список рендерится с index в key. В итоге UI «живой», но поведение становится хрупким: мерцания, лишние ререндеры, потеря фокуса, баги после фильтрации и сортировки.

Если нужен стабильный React-код, проверьте три вещи:
— состояние должно жить как можно ближе к тому месту, где оно реально меняется;
— эффект обязан делать одну работу, иначе его сложно тестировать и отменять;
— key должен описывать сущность, а не позицию в массиве.

Отдельно смотрите на зависимости в хуках. Если туда попали объекты и функции без стабилизации, эффект начнёт срабатывать чаще, чем вы ожидаете. `useMemo` и `useCallback` не лечат архитектуру, но помогают не разносить лишние перерисовки по дереву. Для тяжёлых списков это особенно заметно в связке с виртуализацией и селекторами состояния.

Есть наблюдение которое стоит проверить: если баг выглядит как проблема рендера, сначала ищите не JSX, а границу ответственности. Когда данные, сайд-эффекты и представление разведены, React становится предсказуемым.