ReactJS: How to use an immutable empty array or object

Question

In functional programming languages we often have a Nil / Empty object / array / list, as a singleton so that Nil === Nil.

In Javascript immutability is not by default so [] !== [] and {} !== {}

The problem is that I'm getting payloads from a backend with sometimes empty arrays, or we sometime use empty arrays as default values too as it's convenient.

I'm using ReactJs in a pure way, with the equivalent of PureRenderMixin but sometimes we have components that do something similar to <Comp myProp={[]}/> (obviously simplified). And obviously that triggers unnecessary React renderings.

I guess I can do something like <Comp myProp={MyCustomEmptyArraySingleton}/> to solve the problem, or rework PureRenderMixin

What is the best way? So that the developpers do not have to think too much about this?

Answer 1

I would suggest you take a look at Immutable.js, which is developed by Facebook and it is meant to play well with React.