reactjs 有没有更好的方法来实现延迟更新数据的钩子[关闭]

mw3dktmi 于 2023-06-05 发布在 React

关注(0)|答案(1)|浏览(216)

已关闭，此问题为opinion-based。目前不接受答复。
**想改善这个问题吗？**更新问题，以便editing this post可以用事实和引用来回答。

11小时前关闭
Improve this question
尝试创建一个自定义钩子，当状态值更改时，它会延迟更新数据。这是我找到的唯一能让它按照我想要的方式工作的方法。我遇到的问题是onUpdate总是会导致useEffect被触发。所以我使用useRef来控制何时运行onUpdate。
有没有更好的方法来实现这样的钩子？我觉得我不应该以这种方式使用useRef？

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

const useDebounce = (value, delay, onUpdate) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  const shouldUpdate = useRef(false);

  useEffect(() => {
    const timeoutID = setTimeout(() => {
      setDebouncedValue(value);
      shouldUpdate.current = true;
    }, delay);
    return () => clearTimeout(timeoutID);
  }, [value, delay]);

  useEffect(() => {
    if (shouldUpdate.current) {
      onUpdate(debouncedValue);
      shouldUpdate.current = false;
    }
  }, [debouncedValue, onUpdate]);

  return debouncedValue;
};

export default useDebounce;

reactjs

来源：https://stackoverflow.com/questions/76394331/is-there-a-better-way-to-implement-a-hook-that-delays-updating-the-data

1条答案

按热度按时间

wgx48brx1#

只是一个建议，而不是使用useRef，您可以使用useState和useEffect的组合来跟踪去抖值并触发onUpdate函数。
示例代码：

import { useState, useEffect } from "react";

const useDebounce = (value, delay, onUpdate) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timeoutID = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(timeoutID);
  }, [value, delay]);

  useEffect(() => {
    if (debouncedValue !== value) {
      onUpdate(debouncedValue);
    }
  }, [debouncedValue, value, onUpdate]);

  return debouncedValue;
};

export default useDebounce;

赞(0）回复(0）举报 2023-06-05

我来回答

reactjs 有没有更好的方法来实现延迟更新数据的钩子[关闭]

1条答案

相关问题

热门标签

最新问答