Synchronize CountdownPrompt and Metronome setIntervals

[rsmpark]

The countdown should be in sync with the click of the metronome.

[rsmpark]

const CountdownPrompt = () => {
  const [count, setCount] = useState(7);
  const { dispatch } = useAppCtx();
  const { state } = useMetronomeCtx();
  const metronomeCnt = state.count;
  const didMount = useRef(false);

  useEffect(() => {
    if (didMount.current) {
      setCount((prevCount) => prevCount - 1);
    }
    didMount.current = true;
  }, [metronomeCnt]);

  if (count === 0) {
    dispatch({ type: "NEXT_STAGE" });
  }

  return <div>{<p>{count}</p>}</div>;
};

export default CountdownPrompt;

Countdown count is synchronized with the metronome count state. -> if metronome count changes, decrement countdown

However, this causes issues as useEffect is run twice causing the countdown to be decremented even if metronome count is not updated

[rsmpark]

Need to explore alternative approaches. Possible solutions:

• Use RTK store

  • RTK provides middleware that can be injected to listen for state updates
  • RTK store is more predictable with state changes

• Create custom middleware for Context API

  • imitating RTK createListenerMiddleware

• Create behaviour composition on useMetronome hooks

  • create a wrapper for useMetronome hook to extend its behaviour to allow synchronization with CountdownPrompt
  • https://medium.com/geekculture/middleware-function-for-contextapi-reducer-ab2e772da31f