Using a module state as a global state in React

As we discussed in Chapter 3, Sharing Component State with Context, React Context is designed to provide different values for different subtrees. Using React Context for a singleton global state is a valid operation, but it doesn't use the full capability of Context.

If what you need is a global state for an entire tree, a module state might fit better. However, to use a module state in a React component, we need to handle re-rendering ourselves.

Let's start with a simple example. Unfortunately, this is a non-working example:

let count = 0;
const Component1 = () => {
  const inc = () => {
    count += 1;
  }
  return (
    <div>{count} <button onClick={inc}>+1</button></div>
  );
};

You will see count 0 at the beginning. Clicking button increases the count variable, but it doesn't trigger the component...