useCallbackInNextRender.js

export function useCallbackInNextRender() {
  const [value, set] = useState(null);

  useSafeEffect(
    (safetyGuard) => {
      if (!value) return;
      const [callback, args] = value;
      callback(safetyGuard, ...args);
    },
    [value]
  );

  return useCallback((callback, ...args) => {
    set([callback, args]);
  }, []);
}

function App() {
  const [state, setState] = useState({ a: 1, b: 2});
  
  const submit = useCallback(() => {
  	console.log(state);
  }, [state]);
  
  const setDelayedSubmit = useCallbackInNextRender();
  
  const onChange = useCallback((name, value) => {
    // setState is async, therefore it's not possible to read updated value right back
  	setState(state => ({ ...state, [name]: value }));
    // submit(); // it won't work as state might not (and won't) be updated yet
    // so it's delayed until next "render"
    setDelayedSubmit(submit);
  }, []);
  
  // ...
}