custom-hook.tsx

import React, { useState } from 'react'

interface Props {
  initialState: number,
  step: number
}

function useCounter({ initialState, step }: Props) {
  const [count, setCount] = useState(initialState)
  const increment = () => setCount(count + step)
  return { count, increment }
}

function Counter() {
  const { count, increment } = useCounter({ initialState: 0, step: 1 })
  return <button onClick={increment}>{count}</button>
}

export default Counter