3

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.

1
  • Child components can use the immutable interface too. this.props.obj.get('foo') rather than this.props.obj.foo. Commented May 1, 2016 at 9:37

1 Answer 1

6

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.

Sign up to request clarification or add additional context in comments.

1 Comment

ahh...yes...the proptypes. excellent point! thanks for the answer!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.