Look, Ma! No dispatcher!

context.js

import React, { createContext, useContext, useMemo, useState } from 'react';

export const NumberContext = createContext();

export function NumberContextProvider(props) {
  const [state, setState] = useState({
    number: 0,
  });
  
  // Using useState instead of useMemo so React doesn't garbage collect it.
  // Using useState instead of useRef so we only create the actions once.
  const [actions] = useState(() => ({
    increment(amount = 1) {
      setState((prev) => ({
        ...prev,
        number: prev.number + amount,
      });
    },

    decrement(amount = 1) {
      setState((prev) => ({
        ...prev,
        number: prev.number - amount,
      });
    },
  }));
  
  // Prevent React from triggering needless rerenders.
  const value = useMemo(
    () => [state, actions],
    [state, actions]
  );
  
  return <NumberContext.Provider {...props} value={value} />;
}

export function useNumberContext() {
  return useContext(NumberContext);
}

counter.js

import React from 'react';
import { useNumberContext } from './context.js';

export function Counter() {
  const [state, actions] = useNumberContext();
  
  return (
    <div>
      <button onClick={() => actions.decrement()}>-1</button>
      {` ${state.number} `}
      <button onClick={() => actions.increment(2)}>+2</button>
    </div>
  );
}