block9.jsx

const MyComp = () => {
  const [permission, currentCount, setCount] = usePermissionedCounter(count);
  const count = () => setCount(currentCount + 1);
  return (<div> To infinity! {currentCount} <button onClick={count}>Count</button></div>);
}

const callBackendForPermission = () => new Promise((resolve) => resolve(true));

const usePermissionedCounter = (countCb) => {
  const [currentCount, setCount] = useState(0);
  const [permission, setPermission] = useState(true);

  useEffect(() => {
    // I decide if you may count
    callBackendForPermission(currentCount).then((backendPermission) => {
      if (backendPermission) {
        countCb();
        setPermission(true);
      } else {
        setPermission(false);
      }
    })

  }, [currentCount, countCb])

  return [permission, currentCount, setCount]
}