title: ReactJS: How to use an immutable empty array or object
body: <p>In functional programming languages we often have a Nil / Empty object / array / list, as a singleton so that <code>Nil === Nil</code>.</p>
  
  <p>In Javascript immutability is not by default so <code>[] !== []</code> and <code>{} !== {}</code></p>
  
  <p>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.</p>
  
  <p>I'm using ReactJs in a pure way, with the equivalent of <code>PureRenderMixin</code> but sometimes we have components that do something similar to <code>&lt;Comp myProp={[]}/&gt;</code> (obviously simplified). And obviously that triggers unnecessary React renderings.</p>
  
  <p>I guess I can do something like <code>&lt;Comp myProp={MyCustomEmptyArraySingleton}/&gt;</code> to solve the problem, or rework <code>PureRenderMixin</code></p>
  
  <p>What is the best way? So that the developpers do not have to think too much about this?</p>