Creating a good state solution

States are quite capable. A component without states is like a function without variables. It would lack capabilities of reasoning. A piece of UI logic relies on states to work upon continuous interactions from users.

We built a custom state in the previous chapter as follows:

let states = {}
function _getM2(initialValue, key) {
  if (states[key] === undefined) {
    states[key] = initialValue
  } 
  return states[key]
}
function _setM2(v, key) {
  states[key] = v
  ReactDOM.render(<Title />, rootEl)
}

Though this approach works, there are a few problems we need to address before we can be seriously considered using it with React. We'll mention these problems one by one as follows.

The location where the states are allocated is the first major problem:

let states = {}

The preceding states variable is allocated as a global variable, but normally we&apos...