Custom useReducer limitations about micro-state-management-with-react-hooks HOT 2 CLOSED

import { useState, useReducer, useCallback } from "react";

const useReducerCustom = (reducer, initialArg, init) => {
  const [state, setState] = useState(
    init ? () => init(initialArg) : initialArg
  );
  const dispatch = useCallback(
    (action) => setState((prev) => reducer(prev, action)),
    [reducer]
  );
  return [state, dispatch];
};

const init = (count) => ({ count });

const ComponentWithUseReducer = ({ initialCount }) => {
  const [bonus, setBonus] = useState(0);
  const [state, dispatch] = useReducer(
    (prev, delta) => ({ ...prev, count: prev.count + delta + bonus }),
    initialCount,
    init
  );
  const [stateCustom, dispatchCustom] = useReducerCustom(
    (prev, delta) => ({ ...prev, count: prev.count + delta + bonus }),
    initialCount,
    init
  );
  return (
    <>
      <div>Score with useReducer: {state.count}</div>
      <div>Score with custom useReducer: {stateCustom.count}</div>
      <div>
        <button
          onClick={() => {
            setBonus((x) => x + 1);
            dispatch(1);
            dispatchCustom(1);
          }}
        >
          +1
        </button>
      </div>
    </>
  );
};

export default function App() {
  return <ComponentWithUseReducer initialCount={0} />;
}