javascript - useEffect with debounce - Stack Overflow

admin管理员组

文章数量:1339463

I'm trying to create an input field that has its value de-bounced (to avoid unnecessary server trips). The first time I render my ponent I fetch its value from the server (there is a loading state and all).

Here is what I have (I omitted the irrelevant code, for the purpose of the example).

This is my debounce hook:

export function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

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

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

  return debouncedValue;
}

(I got this from: /)

Right, here is my ponent and how I use the useDebounce hook:

function ExampleTitleInput(props) {
  const [title, setTitle] = useState(props.title || "");
  const [lastCommittedTitle, setLastCommittedTitle] = useState(title);
  const [mitsCount, setCommitsCount] = useState(0);

  const debouncedTitle = useDebounce(title, 1000);

  useEffect(() => {
    setTitle(props.title || "");
  }, [props.title]);

  useEffect(() => {
    if (debouncedTitle !== lastCommittedTitle) {
      setLastCommittedTitle(debouncedTitle);
      setCommitsCount(mitsCount + 1);
    }
  }, [debouncedTitle, lastCommittedTitle, mitsCount]);

  return (
    <div className="example-input-container">
      <input
        type="text"
        value={title}
        onChange={e => setTitle(e.target.value)}
      />
      <div>Last Committed Value: {lastCommittedTitle}</div>
      <div>Commits: {mitsCount}</div>
    </div>
  );
}

Here is the parent ponent:

function App() {
  const [title, setTitle] = useState("");

  useEffect(() => {
    setTimeout(() => setTitle("This came async from the server"), 2000);
  }, []);

  return (
    <div className="App">
      <h1>Example</h1>
      <ExampleTitleInput title={title} />
    </div>
  );
}

When I run this code, I would like it to ignore the debounce value change the first time around (only), so it should show that the number of mits are 0, because the value is passed from the props. Any other change should be tracked. Sorry I've had a long day and I'm a bit confused at this point (I've been staring at this "problem" for far too long I think).

I've created a sample:

It should show the number of mits being 0 and the value set correctly without the debounce to change.

I hope I'm making sense, please let me know if I can provide more info.

Edit

This works exactly as I expect it, however it's giving me "warnings" (notice dependencies are missing from the deps array):

function ExampleTitleInput(props) {
  const [title, setTitle] = useState(props.title || "");
  const [lastCommittedTitle, setLastCommittedTitle] = useState(title);
  const [mitsCount, setCommitsCount] = useState(0);

  const debouncedTitle = useDebounce(title, 1000);

  useEffect(() => {
    setTitle(props.title || "");
    // I added this line here
    setLastCommittedTitle(props.title || "");
  }, [props]);

  useEffect(() => {
    if (debouncedTitle !== lastCommittedTitle) {
      setLastCommittedTitle(debouncedTitle);
      setCommitsCount(mitsCount + 1);
    }
  }, [debouncedTitle]); // removed the rest of the dependencies here, but now eslint is plaining and giving me a warning that I use dependencies that are not listed in the deps array

  return (
    <div className="example-input-container">
      <input
        type="text"
        value={title}
        onChange={e => setTitle(e.target.value)}
      />
      <div>Last Committed Value: {lastCommittedTitle}</div>
      <div>Commits: {mitsCount}</div>
    </div>
  );
}

Here it is:

This works, fine, but I'm worried about the warning, it feels like I'm doing something wrong.

I'm trying to create an input field that has its value de-bounced (to avoid unnecessary server trips). The first time I render my ponent I fetch its value from the server (there is a loading state and all).

Here is what I have (I omitted the irrelevant code, for the purpose of the example).

This is my debounce hook:

export function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

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

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

  return debouncedValue;
}

(I got this from: https://usehooks./useDebounce/)

Right, here is my ponent and how I use the useDebounce hook:

function ExampleTitleInput(props) {
  const [title, setTitle] = useState(props.title || "");
  const [lastCommittedTitle, setLastCommittedTitle] = useState(title);
  const [mitsCount, setCommitsCount] = useState(0);

  const debouncedTitle = useDebounce(title, 1000);

  useEffect(() => {
    setTitle(props.title || "");
  }, [props.title]);

  useEffect(() => {
    if (debouncedTitle !== lastCommittedTitle) {
      setLastCommittedTitle(debouncedTitle);
      setCommitsCount(mitsCount + 1);
    }
  }, [debouncedTitle, lastCommittedTitle, mitsCount]);

  return (
    <div className="example-input-container">
      <input
        type="text"
        value={title}
        onChange={e => setTitle(e.target.value)}
      />
      <div>Last Committed Value: {lastCommittedTitle}</div>
      <div>Commits: {mitsCount}</div>
    </div>
  );
}

Here is the parent ponent:

function App() {
  const [title, setTitle] = useState("");

  useEffect(() => {
    setTimeout(() => setTitle("This came async from the server"), 2000);
  }, []);

  return (
    <div className="App">
      <h1>Example</h1>
      <ExampleTitleInput title={title} />
    </div>
  );
}

When I run this code, I would like it to ignore the debounce value change the first time around (only), so it should show that the number of mits are 0, because the value is passed from the props. Any other change should be tracked. Sorry I've had a long day and I'm a bit confused at this point (I've been staring at this "problem" for far too long I think).

I've created a sample:

https://codesandbox.io/s/zen-dust-mih5d

It should show the number of mits being 0 and the value set correctly without the debounce to change.

I hope I'm making sense, please let me know if I can provide more info.

Edit

This works exactly as I expect it, however it's giving me "warnings" (notice dependencies are missing from the deps array):

function ExampleTitleInput(props) {
  const [title, setTitle] = useState(props.title || "");
  const [lastCommittedTitle, setLastCommittedTitle] = useState(title);
  const [mitsCount, setCommitsCount] = useState(0);

  const debouncedTitle = useDebounce(title, 1000);

  useEffect(() => {
    setTitle(props.title || "");
    // I added this line here
    setLastCommittedTitle(props.title || "");
  }, [props]);

  useEffect(() => {
    if (debouncedTitle !== lastCommittedTitle) {
      setLastCommittedTitle(debouncedTitle);
      setCommitsCount(mitsCount + 1);
    }
  }, [debouncedTitle]); // removed the rest of the dependencies here, but now eslint is plaining and giving me a warning that I use dependencies that are not listed in the deps array

  return (
    <div className="example-input-container">
      <input
        type="text"
        value={title}
        onChange={e => setTitle(e.target.value)}
      />
      <div>Last Committed Value: {lastCommittedTitle}</div>
      <div>Commits: {mitsCount}</div>
    </div>
  );
}

Here it is: https://codesandbox.io/s/optimistic-perlman-w8uug

This works, fine, but I'm worried about the warning, it feels like I'm doing something wrong.

• javascript
• reactjs
• react-hooks

Share Improve this question Follow edited Aug 19, 2019 at 13:48 Dimitar Dimitrov asked Aug 18, 2019 at 19:07 Dimitar DimitrovDimitar Dimitrov 15.2k99 gold badges5353 silver badges8181 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

A simple way to check if we are in the first render is to set a variable that changes at the end of the cycle. You could achieve this using a ref inside your ponent:

const myComponent = () => {
    const is_first_render = useRef(true);

    useEffect(() => {
        is_first_render.current = false;
    }, []);

    // ...

You can extract it into a hook and simply import it in your ponent:

const useIsFirstRender = () => {
    const is_first_render = useRef(true);

    useEffect(() => {
        is_first_render.current = false;
    }, []);

    return is_first_render.current;
};

Then in your ponent:

function ExampleTitleInput(props) {
    const [title, setTitle] = useState(props.title || "");
    const [lastCommittedTitle, setLastCommittedTitle] = useState(title);
    const [updatesCount, setUpdatesCount] = useState(0);
    const is_first_render = useIsFirstRender(); // Here

    const debouncedTitle = useDebounce(title, 1000);

    useEffect(() => {
        setTitle(props.title || "");
    }, [props.title]);

    useEffect(() => {
        // I don't want this to trigger when the value is passed by the props (i.e. - when initialized)
        if (is_first_render) { // Here
            return;
        }

        if (debouncedTitle !== lastCommittedTitle) {
            setLastCommittedTitle(debouncedTitle);
            setUpdatesCount(updatesCount + 1);
        }
    }, [debouncedTitle, lastCommittedTitle, updatesCount]);

    // ...

You can change the useDebounce hook to be aware of the fact that the first set debounce value should be set immediately. useRef is perfect for that:

export function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  const firstDebounce = useRef(true);

  useEffect(() => {
    if (value && firstDebounce.current) {
      setDebouncedValue(value);
      firstDebounce.current = false;
      return;
    }

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

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

  return debouncedValue;
}

I think you can improve your code in some ways:

First, do not copy props.title to a local state in ExampleTitleInput with useEffect, as it may cause excessive re-renders (the first for changing props, than for changing state as an side-effect). Use props.title directly and move the debounce / state management part to the parent ponent. You just need to pass an onChange callback as a prop (consider using useCallback).

To keep track of old state, the correct hook is useRef (API reference).

If you do not want it to trigger in the first render, you can use a custom hook, such as useUpdateEffect, from react-use: https://github./streamich/react-use/blob/master/src/useUpdateEffect.ts, that already implements the useRef related logic.

本文标签： javascriptuseEffect with debounceStack Overflow