i have set of components those use central store(i.e. redux store) via container component. these components are tend to be flat simple and reside within HOC component. HOC component utilizes react-redux connect.
class HOComponent extends Component {
const { data1, data2 } = this.props;
render() {
<Component1 data={data1} />
<Component2 data={data2} />
}
}
const selector = (state) => ({
data1 = selectors.data1(state),
data2 = selectors.data2(state),
other = selectors.other(state)
});
above is the selector for child component Component1 Component2 respectively.
Below how is the selectors look like which utilizes reselect.
const alldata = (state) =>
state.alldata;
export other = (state) =>
state.other;
export data1 = createSelector(
[alldata],
(alldata) => {
//lets assume
return alldata.filter(d => d.criteria === data1.criteria);
})
export data2 = createSelector(
[alldata],
(alldata) => {
//lets assume
return alldata.filter(d => d.criteria === data2.criteria);
})
the question is this right usage of the reselect i noticed this is ineffective, since if my HOC other selctor triggered Component1 Component2 also being rerendered anyway. should i be checking each data flow within shouldComponentUpdate method. i thought reselect usage will battle with this issue in first place. did i misunderstand it. is it only prevents recalculation part?
this is continuation of my earlier post prevent selectors of child components being triggerred in redux