Что такое derived state и почему он вреден?

Понятие derived state или производное состояние описывает антипаттерн проектирования, при котором компонент сохраняет в своем локальном state данные, которые на самом деле можно легко вычислить на основе актуальных пропсов или других значений. Такой подход является избыточным и часто приводит к тому, что данные в приложении начинают рассинхронизовываться, создавая трудноуловимые баги в пользовательском интерфейсе.

Главная опасность производного состояния заключается в том, что при изменении исходных данных локальная копия в state не обновляется автоматически, если разработчик явно не прописал логику синхронизации. В результате пользователь видит устаревшую информацию, а код компонента обрастает сложными и ненадежными эффектами для отслеживания изменений.

Правильным решением в подобных ситуациях является отказ от хранения вычисляемых данных в state и расчет их прямо во время каждого рендеринга компонента. Если вычисления требуют больших затрат ресурсов процессора, для оптимизации производительности следует использовать встроенный хук useMemo, который мемоизирует результат до тех пор, пока не изменятся его зависимости.

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