view/useCounter.tsx

import { useState } from 'react'
 
export default function useCounter() {
    const [count,setCount]=useState(0)
    const increment=()=>{
        setCount(count+1)
    }
    const decrement=()=>{
        setCount(count-1)
    }
    const reset=()=>{
        setCount(0)
    }
    return {count,increment,decrement,reset}
}

Count.tsx

import useCounter from "../view/useCounter";
export default function Count() {
  const { count, increment, decrement, reset } = useCounter();
  return (
    <div>
      <div>{count}</div>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Bomm:0</button>
    </div>
  );
}

效果