How to properly structure the application architecture?

Question

JavaScript

Hello!
There is a catalog page on which the blocks are located:
1) Filters
2) TODO list
3) Operations (for example: in the list of each element there is checkobx. When you click on any button in the operation block, we take all the selected TODOs from the list and something then we do with it.)
PS I use redux
The crux of the matter is that I have a container:

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from './actions';
import Filter from '../components/Filter'
import List from '../components/List'
import Operations from '../components/Operations'

class PageList extends Component {
    
    render() {
        return <div>
            <Filter params1={this.props.params1} actions={this.props.actions}/>
            <List params2={this.props.params2} actions={this.props.actions}/>
            <Operations params3={this.props.params3} actions={this.props.actions}/>
        </div>;
    }
    
}

function mapState(store) {
    return {
        params1 : store.params1,
        params2 : store.params2,
        params3 : store.params3,
    };
}

function mapDispatch(dispatch) {
    return {
        actions : bindActionCreators(actions, dispatch),
    };
}

export default connect(mapState, mapDispatch)(PageList);

If we update the state of sotre (storage in redux), then the container (PageList) will be re-rendered and its internals.
Question: when changing sotre (storage in redux), I only updated those components that had their props changed?
PS if I have changed sotre data (storage in redux) for the Filter component, but there is no data in sotre (storage in redux) for the List component and at the same time there is a large list in the component, compare the new props with the previous ones in the List component, somehow not reasonable.
Thank you!

Answer 1

In terms of react, the expression "update only those components whose props have changed" means "check props in shouldComponentUpdate". No other way. even if you make the List a container, this check is also performed inside it.
But why are you afraid of checking props? The whole point of the concept (react+redux) is that the data is immutable and the check "did something change?" is just checking against references (i.e. very fast, no deepEquals).
The react team offers an official add-on shallowCompare :

shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

I'm using https://github.com/gaearon/react-pure-render for now . Make your "stupid" components like PureRender and you'll be happy.

Answer 2

If you do not want to compare props using shouldComponentUpdate (write that this is not reasonable), then I think the only option is to make the Filter and List components containers (Operations as desired, it is not clear from the task whether you want to "not update" it too or not )