counter as hook #hooks #hook #counter #useCounter

Counter.js

const useCount = () => {
  const [{ count }, setState] = useStore();

  const increment = () => {
    setState(old => ({
      ...old,
      count: old.count + 1
    }));
  }

  const decrement = () =>
    setState(old => ({
      ...old,
      count: old.count + 1
    }));
  }

  return {count, increment, decrement}
}

const Counter = () => {
  const { count, increment, decrement } = useCount()

  return (
    <div>
      <button onClick={decrement}>-</button>
      {count}
      <button onClick={increment}>+</button>
    </div>
  );
};