Resolved: useEffect calling api's couple of times reactjs

Question:

I have this useEffect function in react component. I am calling api videoGridState here. Now what is happening here it is calling my api 2 times one at intitial page reaload and second one when count is changing. I want it to be called single time when page reloads. But also when streamSearchText changes

  const [count, setCount] = useState(0);
  const [streamSearchText, setStreamSearchText] = useState("");
  useEffect(() => {
    videoGridState();
  }, [count]);

  useEffect(() => {
    const delayDebounceFn = setTimeout(() => {
      setCount(count + 1);
    }, 1000);

    return () => clearTimeout(delayDebounceFn);
  }, [streamSearchText]);

How can I do that?

Answer:

The main issue is that you have two useEffect calls, and so they’re each handled, and the second triggers the first (after a delay), resulting in the duplication.
As I understand it, your goal is:

Run videoGridState immediately on mount, and
Run it again after a delay of 1000ms whenever streamSearchText changes

That turns out to be surprisingly awkward to do. I’d probably end up using a ref for it:

const firstRef = useRef(true);
const [streamSearchText, setStreamSearchText] = useState("");
useEffect(() => {
    if (firstRef.current) {
        // Mount
        videoGridState();
        firstRef.current = false;
    } else {
        // `streamSearchText` change
        const timer = setTimeout(() => {
            videoGridState();
        }, 1000);
        return () => clearTimeout(timer);
    }
}, [streamSearchText]);

Live Example:

You could also do the query immediately when streamSearchText is "", but that would happen every time streamSearchText was "", not just on mount. That may be good enough, depending on how rigorous you need to be.
Additionally, though, if you’re still seeing something happen “on mount” twice, you may be running a development copy of the libraries with React.StrictMode around your app (the default in many scaffolding systems). See this question’s answers for details on how React.StrictMode may mount your component more than once and throw in other seeming surprises.

If you have better answer, please add a comment about this, thank you!

Resolved: useEffect calling api’s couple of times reactjs

Resolved: Why when i change manualy the url on my react page it ignores the .css file?

Resolved: navigate and redirect not redirecting to path in react router

Resolved: Time Complexity: Find the number of people who know a secret leetcode 2327

Leave A Reply