Exploring the module state

The module state is a variable defined at the module level. Module here means an ES module or just a file. For simplicity, we assume that a variable defined outside a function is a module state.

For example, let's define the count state:

let count = 0;

Assuming this is defined in a module, this is a module state.

Typically, with React, we want to have an object state. The following defines an object state with count:

let state = {
  count: 0,
};

More properties can be added to the object. Nesting objects are also possible.

Now, let's define functions to access this module state. getState is a function to read state, and setState is a function to write state:

export const getState = () => state;
export const setState = (nextState) => {
  state = nextState;
};

Notice that we added export to these functions to express that they are expected to be used outside the module.

In React, we often update...