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...