React повторно делает компонент ненужным после замены пропеллера

Question

Итак, у меня есть редуктор autocomplete, в котором хранятся все параметры, загруженные через react-select. У меня также есть два компонента - <Parent /> и <Modal />. Оба они подключены к состоянию притока для получения autocomplete реквизитов, поскольку оба имеют свой собственный <AsyncSelect /> компонент.

Select, который является дочерним элементом компонента <Parent />, получает параметры от редуктора: autocomplete.labels. Второй Select компонент, который является потомком <Modal />, получает параметры от редуктора: autocomplete.differentLabels.

Теперь, когда я использую Select, который является потомком Modal, весь компонент Parent перерисовывается, даже если jsx не зависит от autocomplete. Это ожидаемое поведение? Из-за этого повторного рендеринга производительность снижается.

Может, стоит разделить labels и differentLabels на отдельные редукторы?

Answer 1

Возможным решением может быть использование shouldComponentUpdate для сравнения текущих реквизитов с предыдущими реквизитами и выполнения некоторой логики для предотвращения ненужного обновления.

shouldComponentUpdate(nextProps, nextState) {
    if (this.props.myProp !== nextProps.myProp) {
        // Your logic
        return false;
    }
    return true;
}