React自定义hook 给异步函数增加竞态锁,防止并发执行。

useLockCallback 和 useCallback用法一致,使用ref标记防止并发执行

import { useCallback, useRef } from 'react';

export default function useLockCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList) {
  const lock = useRef(false);
  return useCallback(async (...args) => {
    if (lock.current) return;
    lock.current = true;
    try {
      const req = await callback(...args);
      lock.current = false;
      return req;
    } catch (e) {
      lock.current = false;
      throw e;
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容