React re-renders component unnecessary after prop change

Question

So I have reducer autocomplete that stores all options loaded throught react-select. I also have two components - <Parent /> and <Modal />. Both of them are connected to redux state to receive autocomplete props, because both of them have its own <AsyncSelect /> component.

Select that is children of <Parent /> component, receives options from reducer: autocomplete.labels. Second Select component that is children of <Modal />, receives options from reducer: autocomplete.differentLabels.

Now, when I'm using Select that is children of Modal, whole Parent component is re-rendered, even if there is no jsx dependent on autocomplete. Is this expected behavior? Because of this re-rendering, performance decreases.

Maybe should I divide labels and differentLabels into separate reducers?

Answer 1

A possible solution can be to use the shouldComponentUpdate to compare the current props to previous props and do some logic there to prevent unnecessary update.

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