useToggle

Hooks used in this custom hook: useState

Taking one example, we have had this idea of switching a state between true and false for a while. We use it in switchable cases, such as toggling a checkbox, hovering over a text, raising an error, or anything that simulates a light switch. See Figure 9.1 for one of the usages:

Figure 9.1 – useToggle

Can we abstract this idea to provide such boolean state as well as the toggle functionality? Let's start refactoring:

const useToggle = (initialStatus = false) => {
  const [status, setStatus] = useState(initialStatus)    
  const toggle = () => {
    dispatch(status => !status)
  )    
  return [status, toggle]
}

In the preceding code block, the useToggle custom hook takes an initialStatus as the input argument with false as the default value, and it returns the status and a toggle...