Using shouldComponentUpdate for block component re-render every second

There are few things I noticed about your component

1. render method does all lot of initialization for the children components

2. shouldComponentUpdate is unnecessary as it deals only with props (which is expected as all your state is in the redux store).

3. PureComponent is unnecessary to given that you are connecting it to the store using connect(). Your component has not state, its better being and functional components created using a simple es6 arrow function

For 2. and 3. refer the note on optimizations connect() does for you as it creates containers.

Now its impossible to tell you why your components are being rendered every second without inspecting every line of your components. However, with carefully consideration of the following can help you make sure re-renders are triggered frugally and only when necessary.

1. Keep render() method as light-weight as possiblerender is probably the most called method in all components. More bloated it is slow will you render cycles be. You can move all you localStorage.setItems to componentWillReceiveProps. Each one of those synchronous LocalStorage calls is taking up render time.

2. Remove shouldComponentUpdate. Instead pass only those props to components that it absolutely requires. Make as many components stateless pure functions

shouldComponentUpdate is an escape hatch for components that take in more props they need to render. Downside of sCU: it runs before every component re-render. In some cases it can slow down instead of speeding things up. See this comment here by jimfb. This supports my suggestion of turning as many components into stateless function components as you can - including maybe the component you posted here

3. PureComponent will not be needed if your components are stateless javascript functions taking in only the props they need.

Seems like you need React.PureComponent.Here is the link to it. Link

Basically what it does is before rendering each component, it will check if the component has any changes in the props or the state. If there is no change it won't reRender.

Looks like you are using immutable data structures in your reducer. In ur mapStateToProps, change all the immutable data to normal JS objects calling toJS() method. Then PureComponent will work as intended.