如何通过更改 React.js 中的动态值来停止递归 function

Question

I am calling the verifyAuthentication function, and I want it to be called until no errors are thrown, but there are cases that I want it to stop dynamically, but I'm not achieving that.

const callback = (object, error) => {
    if (error) {
      if (error === 'out of retries') {
        setRetry(0);
        return;
      }
    }
    if (object.data) {
      Cookies.set('token', object.data.token, { expires: 60000 });
      setIsAuthenticated(true);
      Router.push('/extrato').then(() => {
        setIsInLoginStep(true);
      });
    }
  };

  const verifyAuthentication = (
    sessionKey: string,
    _retries: number,
    cb: AuthContextInterface['callback'],
  ) => {
    console.log('Continuar Verificando', keepVerifying);
    if (keepVerifying) {
      api
        .post(`${API_ENDPOINT}/session/verify`, {
          sessionId: sessionKey,
        })
        .then((res) => {
          if (res.status === 200) {
            cb(res, null);
          } else if (_retries > 0) {
            const newRetry = _retries - 1;
            setTimeout(() => {
              verifyAuthentication(sessionKey, newRetry, cb);
            }, delay);
          } else {
            callback([], 'out of retries');
          }
        })
        .catch(() => {
          if (_retries > 0) {
            const newRetry = _retries - 1;
            setTimeout(() => {
              verifyAuthentication(sessionKey, newRetry, cb);
            }, delay);
          } else {
            callback([], 'out of retries');
          }
        });
    }
  };

I simply change the keepVerifying state for false, but on my logs, still see it as true, pretty sure this is because is is a recursive function.

onClick={() => { setKeepVerifying(false) }}

Any tips on how to achiev that?

Answer 1

Whenever verifyAuthentication is called, its recursive calls will always be using the same closure that the initial verifyAuthentication has; the keepVerifying (which was very likely declared with a const ) will not change in that closure.

One option would be to use state to indicate if another call of verifyAuthentication should be run on next mount, eg:

const [verifyAuthNextMount, setVerifyAuthNextMount] = useState(false);
useEffect(() => {
  if (verifyAuthNextMount) {
    setVerifyAuthNextMount(false);
    verifyAuthentication();
  }
}, [verifyAuthNextMount]
// Then, inside verifyAuthentication, instead of an immediate recursive call:
setVerifyAuthNextMount(true);

This will ensure that any given run of verifyAuthentication will have a reference to the most recent value of keepVerifying .

Another option would be to use a ref instead of state for keepVerifying , for which there's a stable reference across all renders.

const keepVerifyingRef = useRef(true);
// ...
// inside verifyAuthentication:
if (keepVerifyingRef.current) {
  api
    .post( // ...
}
// click handler:
onClick={() => { keepVerifyingRef.current = false; }}