Deduplicating Requests

bestfetch automatically prevents multiple identical requests from being made at the same time. It will batch all identical requests into a single request and then reuse the response.

This is best understood with an example. Consider the following fetch code:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => res.json())
  .then(data => {
    console.log('First request received the todo:', data);
  });

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => res.json())
  .then(data => {
    console.log('Second request received the todo:', data);
  });

This code makes two requests to the same exact endpoint, and, accordingly, two network requests are made. You can verify this by running those code snippets in your browser's developer tools.

However, these requests are targeting the same exact endpoint, so it would be more efficient to make just one network request. Run the following code in your browser's developer tools to see that only a single request is made:

bestfetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => {
    console.log('First request received the todo:', res.data);
  });

// This request will "piggy-back" on the previous one;
// a new network request is not made.
bestfetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => {
    console.log('Second request received the todo:', res.data);
  });

When is This Useful?

The example code provided above may seem contrived. When would you ever make two requests back-to-back?

Consider an application that lets a user choose their country, where the list of countries is pulled from an API. You might choose to create a dropdown component that is responsible for fetching its own list of countries.

If you only have one of these dropdowns on the page at a time, then there is no issue. But if you were to render two of these dropdowns at the same time, then they would each would make a request to fetch the same list of countries, which is inefficient.

One solution to this problem is to hoist the call to fetch the countries outside of the dropdown, and then pass the data into the components. Sometimes, this solution is appropriate.

Other times, you may not wish to, or you may be unable to, move the HTTP request. Using bestfetch allows you to keep the request in the component without worrying about how many instances of the component are on the page at one time.

Disabling Deduplication

Pass dedupe: false when calling bestfetch to disable request deduplication for a particular request.

bestfetch('/api/books/2', { dedupe: false })
  .then(res => {
    console.log('Received the book:', res);
  });

Learn More

To learn more about how this algorithm works, and also how you can change its behavior, check out the Identical Requests guide.