useGetState

index.jsx

import { useMemo, useReducer, useRef } from "react";

const useGetState = (initialState) => {
  const state = useRef(initialState);
  const [, update] = useReducer(num => ((num + 1) % 1_000_000), 0);

  return useMemo(() => ([
    () => state.current,
    (newState) => {
      state.current = newState;
      update();
    }
  ]), [update]);
}

function Game() {
  const [count, setCount] = useGetState(0);
  const [started, setStarted] = useGetState(false);

  function increment() {
    setCount(count() + 1);
  }

  function start() {
    if (!started()) setTimeout(() => console.log(`Your score was ${count()}!`), 5000);
    setStarted(true);
  }

  return (
    <button
      onClick={() => {
        increment();
        start();
      }}
    >
      {started() ? "Current score: " + count() : "Start"}
    </button>
  );
}

// Tells React to attach the HelloWorld component to the 'root' HTML div
ReactDOM.render(<Game />, document.getElementById("root"))