Optimizing re-renders

Avoiding extra re-renders is a major challenge when it comes to a global state. This is a big point to consider when designing a global state library for React.

Typically, a global state has multiple properties, and they can be nested objects. See the following, for example:

let state = {
  a: 1,
  b: { c: 2, d: 3 },
  e: { f: 4, g: 5 },
};

With this state object, let's assume two components ComponentA and ComponentB, which use state.b.c and state.e.g, respectively. The following is pseudocode of the two components:

const ComponentA = () => {
  return <>value: {state.b.c}</>;
};
const ComponentB = () => {
  return <>value: {state.e.g}</>;
};

Now, let's suppose we change state as follows:

++state.a;

This changes the a property of state, but it doesn't change either state.b.c or state.e.g. In this case, the two components don't need to re-render...