Test driving the useState hook

A state is one of the most common techniques in React for driving user interactions. Let's consider a component with a button. Each time we click the button, it increments a number and appends it to the Hello World string (see Figure 4.5).

Figure 4.5 – The Hello World counter

We can capture this UI behavior in a Title component:

const Title = () => {
  let [count, setCount] = useState(0)
  
  const onClick = () => {
    setCount(count + 1)
  }
  
  return (
    <>
      <button onClick={onClick}>+</button>
      <h1>Hello World+{count}</h1>
    </>
  )
}

Here, we use [count, setCount] to keep track of the count state. Then, we display count in the h1 element of the page and dispatch...