React async function blocking a ref change-CodePudding

The

Oddly, it fetches twice after missing a fetch for the previous ref change. I really don't know why this is.

What's also curious is that when I replace the setResults line with just a simple console.log(response.data), it never misses a hook. Here's the console output from that:

My suspicion is that the setResults update somehow triggers a re-render of the dom (even though I'm not using the results state anywhere in this simplified version), and it interferes with selectedResultTypeRef being recognized as an update that gets captured by the useEffect hook. I don't know why it's every other update, but I've at least verified its consistent pattern.

Other than that, I'm completely at a loss. I don't know what else to try.

CodePudding user response：

I dont think i have the answer to your problem. But I can shine a light.

a react useRef is a mutable container, this means that it should not be used as a dependency in a useEffect. I believe this would be where the issue lies, it is not a reliable dependency and should never be used like that, this is not the expected use case within reactjs.

for a better explanation, please see this link https://stackoverflow.com/a/60476525/4224964

CodePudding user response：

Here I'm answering to the question "Why is this happening?" and not to the "How to build a search bar with debouncing?" because the details was intentionally omitted.

It is important to remember that:

Calling the setter from useState causes a rerender if the data has changed. Despite the fact that the data is not used.

The effect checks its dependency list during the render, when useEffect is called.

Those effects whose dependencies has changed are executed after the render phase.

Now let's say everything is loaded. selectedResultType === "categories" and selectedResultTypeRef.current === "categories".

Click on submissions button. setSelectedResultType is called and rerender started.

selectedResultType has changed to submissions so effect 1 will be called after the render. selectedResultTypeRef.current has not changed yet, it is still "categories", so effect 2 will not be executed. That's why there is no refetch.

effect 1 is executed. Now selectedResultType === "submissions" and selectedResultTypeRef.current === "submissions".

Click on users button -> rerender.

Checking the dependencies: effect 1 will be called. selectedResultTypeRef.current has changed from "categories" to "submissions" so effect 2 will also be executed.

effect 1 is executed. Now selectedResultType === "users" and selectedResultTypeRef.current === "users".

effect 2 is executed -> refetch -> setSelectedResultType -> rerender.

Checking the dependencies: effect 1 will not be called. But effect 2 will be called because selectedResultTypeRef.current has changed from "submissions" to "users".

effect 2 is executed -> refetch -> setSelectedResultType -> rerender.

Checking the dependencies: no changes.

So it is understandable what is going on, but hard to follow.

The conclusion is very simple — trust the linter. It will save you a headache.

Mutable values like 'selectedResultTypeRef.current' aren't valid dependencies because mutating them doesn't re-render the component.