CountContextProvider.js

const CountContext = React.createContext(null);
const CountContextProvider = ({ children }) => {
  const [count, setCount] = React.useState(0);
  const countRef = React.useRef(count); // more on this in the next section
  countRef.current = count;
  const onClickMemo = React.useCallback(
    () => window.alert(`clickMemo, count: ${countRef.current}`),
    []
  );
  return (
    <CountContext.Provider value={{ count, setCount }}>
      <GrandParent>{children}</GrandParent>
      <MemoComponent onClick={onClickMemo} />
    </CountContext.Provider>
  );
};