我怎样才能在 useEffect 钩子体内获取一个新的 state？

Question

I am trying to build a debounce hook. I have seen several implementations before but none of them suit my needs: usually they delay executing a handler until the attempts to call the handler stop long enough.

useEffect(() => {
  timeout = setTimeout(handler, 500);

  return () => {
    if (timeout){
      clearTimeout(timeout);    
    }
  }
}, [handler]);

(or something like that.) I think this is flawed, because if the intent is to avoid spamming a long-running function, it doesn't take into account whether the function returns within the timeout or not. What if fetching search results takes longer than 500ms in this case?

Instead, I want to try and run a long running function (the handler.) If there isn't one running, execute the handler and return its promise. Also, use the finally block to check to see if the input has changed, and if so, fire the handler again.

My desired usage:

const [input, setInput] = useState<string>("");
const debouncedPromise = useDebounce(() => asyncFunction(input), [input]);

Anytime the input changes, the handler could be queued up if it isn't already running.

This is the code I've written:

import { DependencyList, useEffect, useRef, useState } from "react";

interface IState<T> {
  handler?: () => Promise<T>;
  promise?: Promise<T>;
  isWaiting: boolean;
}

export const useDebounce = <T>(handler: () => Promise<T>, deps: DependencyList = []): Promise<T> | undefined => {
  const [state, setState] = useState<IState<T>>({
    handler,
    isWaiting: false
  });

  const stopWaiting = () => {
    console.log("stopWaiting");
    setState(previousState => ({ ...previousState, waiting: false }));
  };

  const run = () => {
    const promise = handler();
    promise.finally(stopWaiting);

    setState({
      handler,
      isWaiting: true,
      promise,
    });
  };

  useEffect(() => {
    console.log("\nuseEffect");
    console.log(`deps: ${deps}`)
    console.log(`state.isWaiting: ${state.isWaiting}`);
    console.log(`state.handler: ${state.handler}`);
    console.log(`state.promise: ${state.promise}`);

    if (state.isWaiting){
      console.log(">>> state.isWaiting")
      return;
    }
    
    if (handler === state.handler){
      console.log(">>> handler === state.handler")
      return;
    } 
    
    if (state.isWaiting && state.promise && state.handler !== handler){
      console.log(">>> state.isWaiting && state.promise && state.handler !== handler")
      state.promise.finally(run);
      return;
    }

    if (handler !== state.handler){
      console.log(">>> handler !== state.handler")
      run();
    }

    console.log("end useEffect");
  }, [...deps, state.isWaiting]);

  return state.promise;
};

It works for the first invocation, but it never seems to free up the state.isWaiting to allow subsequence, pending handlers to be fired:

useEffect UseDebounce.ts:32
deps: T UseDebounce.ts:33
state.isWaiting: false UseDebounce.ts:34
state.handler: function () {
    return asyncFunction(input);
  } UseDebounce.ts:35
state.promise: undefined UseDebounce.ts:36
>>> handler !== state.handler UseDebounce.ts:55
asyncFunction called with T UseDebounce.tsx:9
end useEffect UseDebounce.ts:59

useEffect UseDebounce.ts:32
deps: T UseDebounce.ts:33
state.isWaiting: true UseDebounce.ts:34
state.handler: function () {
    return asyncFunction(input);
  } UseDebounce.ts:35
state.promise: [object Promise] UseDebounce.ts:36
>>> state.isWaiting UseDebounce.ts:39
asyncFunction resolved with T UseDebounce.tsx:12
stopWaiting UseDebounce.ts:16

useEffect UseDebounce.ts:32
deps: Ti UseDebounce.ts:33
state.isWaiting: true UseDebounce.ts:34 // This should be false at this point

I think I'm stuck with a stale state. How can I resolve this? Is there a better hook I can use to get my desired results? And how can I stop firing the handler once the input "settles down"?

Answer 1

It never seems to free up the state.isWaiting . I think I'm stuck with a stale state.

I think your problem is rather too fresh state. In particular, you are calling the hook with a new, different handler every time, so the only time that handler === state.handler could be true is that initial that initialises the state with the same handler. You might need to use useCallback on the function you're passing.

But even then your code has a problem. If the input changes multiple times while the function still running, you will call state.promise.finally(run); multiple times, which schedules run (with, indeed, some stale handler s) multiples times on the same promise, causing them to execute at the same time.

Is there a better hook I can use to get my desired results?

I would not (only) use a state but rather a simple shared mutable ref for the input that's waiting to be used in the next function invocation. Also let the run function continue with the latest input by itself, instead of scheduling a fixed handler that's hard to cancel.

So I'd write

interface ResultState<T> {
  running: boolean;
  result?: PromiseSettledResult<T>;
}
function useAsyncEvaluation<T, Args extends DependencyList>(fn: (...args: Args) => Promise<T>, input: Args): ResultState<T> {
  const args = useRef<Args | undefined>();
  const [state, setState] = useState<ResultState<T>>({running: false});
  
  function run() {
    const next = args.current;
    if (!next) return false;
    args.current = undefined;
    fn(...next).then(
      value => ({status: "fulfilled", value}),
      reason => ({status: "rejected", reason})
    ).then(result => {
      setState({running: run(), result});
    );
    return true;
  }
  useEffect(() => {
    args.current = input;
    setState(old => {
      if (old.running) {
        return old;
      } else {
        // calling run() inside the state update prevents race conditions
        return {running: run(), result: old.result};
      }
    });
    return () => {
      args.current = undefined;
    };
  }, input)
  return state;
}

Notice that this has the slightly undesirable behaviour of updating state in an effect during the first render and in response to an input change. You might not actually want to do this anyway - rather, return the function from the hook and call it from your event handlers.