counter-hook-example.js

import React, {useState} from 'react'

// Custom hook that manages local state for a counter.
export function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue)
  const increment = () => setCount(count => count + 1)
  const decrement = () => setCount(count => count - 1)
  const reset = () => setCount(initialValue)
  return {
    reset,
    count,
    increment,
    decrement
  }
}

function Counter() {
  // All the business logic around handling the count is contained in this custom hook.
  // The component then can just care about how to render that data.
  const { reset, count, increment, decrement } = useCounter()
  
  return (
    <div>
      <h1>{count}</h1>
      <span onClick={increment}>+</span>
      <span onClick={decrement}>Reset!</span>
      <span onClick={reset}>Reset!</span>
    </div>
  )
}