I am using Redux in my React app, and to be sure I do not mutate state but return new state I have added middleware in development.

My question is are all of my ponents rerendering when change in store occurs?

I am watching this video about ImmutableJs now I do not know if I should implement shouldComponentUpdate in every ponent with shallowEqual function or this thing is done by react automatically? (Maybe it was changed in new version)

Should it bothers me or not? What is best approach when I do not use ImutableJs and using newest React and Redux versions?

I am using Redux in my React app, and to be sure I do not mutate state but return new state I have added middleware https://github./leoasis/redux-immutable-state-invariant in development.

My question is are all of my ponents rerendering when change in store occurs?

I am watching this video https://youtu.be/YFP8lbdZ0cs?t=33m59s about ImmutableJs now I do not know if I should implement shouldComponentUpdate in every ponent with shallowEqual function or this thing is done by react automatically? (Maybe it was changed in new version)

Should it bothers me or not? What is best approach when I do not use ImutableJs and using newest React and Redux versions?

• javascript
• performance
• reactjs
• redux
• rerender

2 Answers 2

The React Redux package does a lot of work to make sure that your wrapped ponent only renders when it needs to. See the related Redux FAQ answer at http://redux.js/docs/FAQ.html#react-rendering-too-often. There's also a number of React rendering debugging tools listed over in my Redux-related libraries catalog, which can show you when your ponents are actually re-rendering, and why.

That said, generally you shouldn't worry about it until you have evidence that you're experiencing actual performance problems.

before i answer your question there are few things that i would like to clear for your understanding,

• How Immutability affects react-redux

consider you have an object in redux state, and you din't took care of immutability and you changed a property. Now as you changed a property so you expect it to re-render but since the object reference didn't update( because state is mutated) redux consider its same state and doesn't update the props so no re-render ( my own experince )

• When you should consider shouldComponentUpdate

Assume you have a very big and plex form, which consider 4 sub forms, now each form access a partial prop. but props keep changing as user fills the form so it renders again and again.. Now there are two solutions

1. At a time render only form or section which is visible to user, sort of render the current Tab( if a multi-tab form) only
2. do a plete check on shouldComponentUpdate and only return true if relevant prop or property of object in props got changed

Now what ImmutableJs does is prevents object from mutating, hence you don't e into a situation where you expect it to re-render but it didn't

So its all upto your preferences how you want to prevent re-render from aboe two solutions