Under the hood, react stores state and props are native objects. When using Immutable.js, you have to constantly convert from Immutable in the store to plain objects for the Component props.
Additionally, redux’s connect() isn’t Immutable aware. Even with redux-immutable, every mapStateToProps is called when any state changes. Know a way around this? Ideally, connect() would be smart enough to only call mapStateToProps() if and only if the subscribed to state changed at a field level.
For better (but still not optimal) performance, there are two things we can do:
- Always apply a recompose pure() to every stateless component. This optimization is annoying boilerplate and easily forgotten. I should make an ESLint rule or babel transform or something.
- Add a second pure() call around the reducer state to avoid unnecessary toJS() or accessor calls. This optimization is rather non-obvious without comments.
Using redux-immutable really doesn’t do anything for performance as redux reducers usually return the same object instance when not changing state.
As far as I can tell, using Immutable doesn’t increase performance because any view reading the immutable state still needs a plain object. Considering that using Immutable mucks up your code’s readability, it’s probably better to just use regular JS objects for state.
I could definitely be wrong though; Here are the different approaches I played with, illustrating the above.