Bug: Duplicate API calls instead of cache usage with useFetch (v8)

[lobor]

Describe the bug
When using useFetch from Hyper fetch v8 in multiple components rendered in a list, identical requests are executed multiple times instead of being deduplicated through cache sharing.

This leads to unnecessary duplicate API calls even when the fetcher and parameters are identical.

---

To Reproduce
Steps to reproduce the behavior:

1. Create two components using the same useFetch hook
2. Render them multiple times using a list (e.g. .map)
3. Mount both components simultaneously in the same render tree
4. Observe network / logs from the fetcher
5. See that the same request is executed multiple times instead of being cached

function ComponentA() {
  const { data } = useFetch(getData);
  return <div>A</div>;
}

function ComponentB() {
  const { data } = useFetch(getData);
  return <div>B</div>;
}

export default function App() {
  const items = Array.from(Array(22).keys());
  return (
    <>
      {items.map((_, index) => (
        <Fragment key={index}>
          <ComponentA />
          <ComponentB />
        </Fragment>
      ))}
    </>
  );
}

---

Expected behavior

• Only one network request should be executed
• All hook instances should share the same cached result
• No duplicate API calls should occur for identical requests

---

Screenshots
Not applicable (behavior observable via network tab or console logs)

---

Smartphone (please complete the following information):

• Device: Pixel 9
• OS: android

---

Additional context

• Issue occurs when multiple components using the same useFetch hook are rendered in a list
• Each component independently triggers the same request
• Suggests cache deduplication is not shared across hook instances or mounts
• Behavior is consistent even when rendering identical fetchers in the same render cycle
• Likely related to cache key resolution or request deduplication timing in v8

[prc5]

Hey! Try to set the deduplication on the request:

export const deduplicatedGetDate = getData.setDeduplicate(true);


function ComponentA() {
  const { data } = useFetch(deduplicatedGetDate);
  return <div>A</div>;
}

function ComponentB() {
  const { data } = useFetch(deduplicatedGetDate);
  return <div>B</div>;
}

export default function App() {
  const items = Array.from(Array(22).keys());
  return (
    <>
      {items.map((_, index) => (
        <Fragment key={index}>
          <ComponentA />
          <ComponentB />
        </Fragment>
      ))}
    </>
  );
}

Some references:

https://hyperfetch.bettertyped.com/docs/guides/core/advanced/deduplication/

(Cool interactive example)
https://hyperfetch.bettertyped.com/docs/core/request#deduplication

[lobor]

doesn't work, same probleme

[lobor]

I have try to set also deduplicateTime to 2000ms, but not work

[prc5]

@lobor I'm checking it now 👀

[prc5]

@lobor I wrote this test. to reproduce and it pass correctly ✅

---

Is there any suspicion from your side what could be wrong here?
Anything is changed for these particular requests in their components - like query params, params or something else?

[prc5]

I didn't detect any regression and coverage with tests there is basically 100% 👀

[prc5]

Could be that queryKey or cacheKey change in some weird combination - maybe you can try to set them manually with setQueryKey and setCacheKey - to some test value to check if this works

[lobor]

I tried, but I still have the same problem.

[lobor]

I cannot send my code for security reasons.
I tried to simplify it as much as possible, and I reproduce the problem every time. I have this issue with several requests.

[lobor]

[prc5]

@lobor try with our dedicated devtools, this should be much much easier 👀 You will see which cache hits get triggered and which queueKeys get triggered so you will be able to figure this out with it (I hope).
If not - I will make some dedicated tooling there and release it soon. 🫡 (Just let me know what is missing or what you would expect)

https://hyperfetch.bettertyped.com/docs/hyper-flow/download/

[prc5]

I was thinking, you can try to:

export const deduplicatedGetDate = getData.setDeduplicate(true).setQueryKey("query123");

This will make sure that:

1. They have deduplication setup
2. query key bucket will be the same - they will go to the same bucket and get optimized there together
3. Don't set the deduplication time, it is for very specific cases only, when you want to deduplicate during x ms of initial request time, otherwise you want to trigger another request.

This way it must work good 👍🏻

[lobor]

Sorry for the delay
I tried and same error, i tried also use with hyper flow but can't open (not compatible platform)
on V6 no problem, only with V8

[lobor]

no problem on browser, only on react-native

[prc5]

Hmmm, are you using new architecture on react native? I will take a look 👀