App.jsx

import React, { useState } from 'react';

export function useCounter() {
  const [count, setCount] = useState(0);
  const decrement = () => setCount(count - 1);
  const increment = () => setCount(count + 1);
  return {
    count,
    decrement,
    increment,
  };
}

export function Increment() {
  const counter = useCounter();
  return (
    <Fragment>
      <div>Count: {counter.count}</div>
      <div>
        <button onClick={counter.increment}>Increment</button>
      </div>
    </Fragment>
  );
}

export function Decrement() {
  const counter = useCounter();
  return (
    <Fragment>
      <div>Count: {counter.count}</div>
      <div>
        <button onClick={counter.decrement}>Decrement</button>
      </div>
    </Fragment>
  );
}