Nitpicking: I think we can potentially tidy these up into just one effect. IMHO it's clearer and we can save the need for comparing isEqual on every render.

const isMountedRef = useRef(false);

useEffect(() => {
  function fetchData() {
    // ...
  }

  // Initial request
  if (!isMountedRef.current) {
    fetchData();
  }

  isMountedRef.current = true;

  const debounceFetchData = debounce(fetchData, 500);
  
  // Debounced request
  debounceFetchData();

  return () => {
    isMountedRef.current = false;
  }
}, [...])

It's not tested so I might have missed something though.

I don't think the suggested code would work:

• It would cause fetchData to be called twice on the first render.
• It would cause debounceFetchData to be called on every render, which would cause response to be set on every render, thus causing an infinite loop, if I had to guess. The comparison against the previous props exists to prevent this.

Ahh, yeah, you're right, I missed that part. I still believe we can somehow skip the isEqual comparison though, but that's not very important anyway.

There's a pretty good article I found recently discussing this kinda stuff:

https://www.benmvp.com/blog/object-array-dependencies-react-useEffect-hook/

In this case, the useEffect callback is dependent upon attributes, block, urlQueryArgs, and httpMethod; the first 3 of those are objects (meaning we can't just use shallow equality checks), and using destructuring on the first 2 won't work since their properties may themselves be objects.

As suggested in the article, a useDeepCompareEffect hook would be the best way to solve the problem, but that would probably only be a slight improvement over what I'm already doing, and since it introduces an external dependency (albeit a small one), I think it might be better suited to a separate PR.

Yeah, I think this is good enough, and we're just refactoring it to hooks anyway. 👍