React + Redux + Immutable - how deep should immutable objects go?

Question

I have a brand new project using React, Redux, and Immutable. I create my state that is a heavily nested Immutable Map. At what point, if any, should I call toJS on it as I pass it's parts down into the child component's props?

I think it makes sense to keep it always one of the Immutable classes (esp in a new project), and I really like the getIn functionality.

Downside, it's not clear if an object deep inside a presentation component is an Immutable class or a plain JS Object.

Answer 1

I recommend keeping it as an Immutable all the way down.

If you ever call toJS on a piece of your Immutable state prior to passing it as a prop to a child component, you'll lose the benefit of that child component being able to do a simple reference check on that prop in its shouldComponentUpdate. See the advanced performance section of the React docs for more info.

Is there a reason you ever want to call toJS? Ultimately, you're just going to be accessing primitive values for your UI eventually anyway, so it's easy enough to access them with get/getIn. And as a bonus, those Immutable types come with some handy methods.

As for the downside you mention, if you use react-immutable-proptypes it makes it easy to see/enforce what each component expects. And if you make the decision to go Immutable all the way down, there's nothing to remember anyway.