I see in redux whenever there is a state change, a new state is created, instead mutating the old one. I want to know how creating a new object every time is beneficial for us. One thing I read it will help in debugging since all the states will be present from the start of the app in browser so we can switch to any state we want. But what about the memory, storing all the stores would eat memory, right? Correct me please. And how would we leverage immutability to increase the performance of our app. I am new to react and redux. And I'm not able to find out the exact answer. Please help me in very simple words. :)
But what about the memory, storing all the stores would eat memory
First of all, in redux there's a single store only, second of all, given the fact that store only keeps primitive data types, memory overhead for even very complex application is so small you don't really have to worry about it. You'll run into much bigger problems sooner than the memory, and when you do, you deal with it, but not sooner - that would be pre-optimization. Some more info from the redux FAQ http://redux.js.org/docs/FAQ.html#performance-state-memory
and how would we leverage immutability to increase the performance of our app
The concept is trivial, since React bases its rendering of the comparison if something has changed in the tree, comparison operations need to be as fast as possible. Enters immutability. For example, given two objects, you don't need to go key by key to determine it's same or not (e.g. Angular 1.x works this way), you just compare obj1 === obj2 and boom, you're done. If two objects point to the same address in memory (behind the scenes) they're equal, otherwise they're not.