A list that never changes in place

React re-renders when a reference changes, and memoised selectors skip work when it has not. That only works if updates produce new objects instead of mutating old ones, which is why persistent, immutable collections keep showing up in state libraries.

Implement an ImmutableList class. new ImmutableList(items) takes an optional array and stores a copy of it, defaulting to an empty list; later changes to the array passed in must not affect the list. push(value) returns a new ImmutableList with the value appended, leaving the original untouched. set(index, value) returns a new ImmutableList with that index replaced, or returns the very same instance (this) when the index is negative or past the end. pop() returns a new ImmutableList without the last value, or the very same instance when the list is already empty. get(index) returns the value at an index, or undefined when out of range. size() returns the number of values. toArray() returns a fresh plain array of the values, so mutating what it returns must not affect the list.

Returning the identical instance when nothing would change is the point: callers compare with === to decide whether to re-render.

const a = new ImmutableList([1, 2]);
const b = a.push(3);
a.toArray();  // [1, 2] — unchanged
b.toArray();  // [1, 2, 3]
a === b;      // false

const a = new ImmutableList([1]);
a.set(5, 9) === a;   // true — out of range, no change
a.set(-1, 9) === a;  // true

const empty = new ImmutableList();
empty.pop() === empty;  // true — nothing to remove