React Boilerplate: Dumb components re-render when the data in

Question

I have a used react-boilerplate to setup the base for my project. Consider I have a container and 2 components(dumb components) like below,

App
  - HomePage(Connected component with sidebarData and detailedData)
     - SideBar(data=sidebarData)
     - DetailedView(data=detailedData)
State
  {
    "sidebarData": makeSelectorSideBarData(), // reselect selector
    "detailedData": makeSelectorDetailedViewData(), // reselect selector
  }

It's clear that the child components are depends on individual data. But when my detailedData changes, it re-renders the SideBar component also.

Is there anyway to avoid this using redux/reselect and without implementing shouldComponentUpdate() ?

It might be worth looking into [PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent). — Tholle, Jul 19 '18 at 18:56

score 1 · Answer 1 · answered Jul 19 '18 at 19:32

1

If you don't want a component to re-render until the props given to it change, you can use PureComponent. Just make sure you know shallow prop and state comparisons will suffice for your use case:

PureComponent’s shouldComponentUpdate() only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences

answered Jul 19 '18 at 19:32

Tholle

108,070
19
198
189

Yeah, It worked. But is there any other way without using `PureCompoents` ? – Kamalakannan J Jul 23 '18 at 18:06
@KamalakannanJ - you can use https://github.com/NoamELB/shouldComponentUpdate-Children – Manny Nov 21 '19 at 06:33

score 1 · Answer 2 · answered Nov 21 '19 at 06:42

You can use a PureComponent alternative - shouldComponentUpdate-Children - https://github.com/NoamELB/shouldComponentUpdate-Children

import {shallowEqual} from 'shouldcomponentupdate-children';

class MyComponent extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        return shallowEqual(this.props, nextProps, this.state, nextState);
    }
}
export default MyComponent;

The github link also includes a live codepen example.

React Boilerplate: Dumb components re-render when the data in

2 Answers2