score:0

Accepted answer

Coming back to my question a year and a half later with my own answer:

Always pass the immutable object if possible. If it's not immutable, just pass it as it is.

I decided that performance is much more important than how pretty the code is.

If a value is either immutable or mutable I pass it as it is and never call toJS if I don't have to. I also won't wrap mutable values with fromJS if they're not stored in the redux store.

I just need to be aware inside the child component that some props are immutable and some are not - and it's actually pretty simple because almost always a complex object will be immutable.

score:1

You should wrap your presentational components in a simple higher-order component that calls toJS() on any Immutable.js object props passed to it.

This will give you the best balance of keeping the performance benefits of Immutable.js whilst keeping your container components from re-rendering too much, as well as keeping your presentational components dependency-free and therefore easily reusable and testable.

The Redux docs have a good selection of best practises for using Immutable.js, in particular, when not to use .toJS(), why your presentational components should be kept pure and how a "toJS" higher-order component might be defined and used.

score:2

To pass props to component collect all data under a key as immutable.

<MyComponent propsKey={Immutable.fromJS({someData: {key: "value"}})} />

To use benefits of Immutable you should avoid from use toJS(). It is very costly and you cannot use useful Immutable functions with that. Until you reach "value", you should use Immutable.get(). It is annoying at first but, you can see how it is useful and easy to use, in time. (To get inner keys using getIn() can be less annoying than chain get functions). In this way your code can work more efficient and you do not need to use unwrap function, in your component you guarantee your data under this.props.propsKey always immutable.


Related Query

More Query from same tag