RequestFox Add to Chrome

How to find duplicate and N+1 API calls in a web app

A duplicate API call is the same request sent more than once, usually by accident. An N+1 pattern is one request per item in a list, such as /items/1, /items/2, /items/3, where one batched request would do. To find them, filter the DevTools Network panel to Fetch/XHR and look for repeats. Or record with RequestFox, a browser extension that marks a repeat as Rapid or Retry, shows a burst as an N+1 chip, and points to the click that caused each call.

For RequestFox 2.4.0, checked . Facts about other tools are from their own pages, checked ; sources below.

Why does my page send the same API call twice?

Usual causes: two parts of the page ask for the same data, a click or a form submit is handled twice, or code sends the call again after a failure. Some repeats are on purpose, such as polling or a heartbeat.

While you build a React app, there is one more. With Strict Mode on, React runs one extra setup and cleanup cycle for every Effect in development [2], so a fetch inside an Effect can show up twice on your machine. React says these checks are development only and do not affect the production build [2]. Look at a production build before you call it a bug.

What is an N+1 API call pattern?

It is a performance problem where an application makes many network requests to fetch one type of resource: one request for each item in a list, instead of one combined request [1]. It often shows up when a page renders a list or a grid and each item loads its own data [1].

Each call costs time, and the cost adds up with the length of the list. Fixes depend on the app, and some of this may be on purpose [1]. Common ones: fetch the data for all items in one call, for example an endpoint that takes a list of ids; load an item's data only when it comes into view; or cache the data, or share one call between the parts that ask for it [1].

How do I find duplicate calls by hand in DevTools?

  1. Open the DevTools Network panel and choose the Fetch/XHR filter [3].
  2. Reload the page or repeat the action, and look down the list for the same address more than once.
  3. Look at the Waterfall, which orders requests by start time [3]. A stack of near-identical bars that start together is a burst.
  4. To see what sent a call, hover over its Initiator column: for a call made by JavaScript it shows the stack trace leading up to the request [3].

This works, and it costs nothing. The counting is by eye, and the list is gone when you close the panel.

How does RequestFox flag duplicate and N+1 calls?

Press Start, use the page, and look for these marks. They are the panel's own labels.

  • Rapid 140 ms the same call fired again within the rapid cutoff: likely a bug
  • Retry 900 ms the same call sent again later, within the window: possibly a retry
  • N+1 one call per id in a quick burst

How it decides:

  • Duplicates: the same method, address and body, from the same tab, inside the Duplicate window (2 seconds at first). A repeat sooner than the Rapid-duplicate cutoff (500 ms at first) is Rapid; a slower one is Retry. Both numbers are in Settings.
  • N+1: five or more different ids on one endpoint inside three seconds show as an N+1 chip above the log, with the number of calls and how long the burst took. Click it to see them. A GraphQL operation or JSON-RPC method sent again and again with different variables counts too, inside one second.
  • The cause: every flagged call is tied to the click or form submit that caused it, and Details → Called from lists the page code that made the call.
  • Repeats you expect: on a card, ··· More → Stop flagging repeats keeps that endpoint's repeats, such as polling, from being flagged.

RequestFox marks what it sees; you decide which repeats are bugs. It sees what a browser tab sends. How to record API calls.

How do I fix them, and check the fix?

Pick the fix that fits [1]: one combined call, loading on demand, or a cache that shares one call. For a repeat that only shows in development, check a production build first [2].

Then record the same flow again. Every session is kept in History, so you can open the earlier one next to the new one and see whether the repeats are gone.

Sources

  1. Sentry documentation, "N+1 API Calls". Checked . docs.sentry.io
  2. React documentation, "StrictMode". Checked . react.dev
  3. Chrome for Developers, "Network features reference". Checked . developer.chrome.com

Something here out of date? Docs change. Tell us at the address in the privacy policy and we will fix it.

Next

Count the calls your page really makes.

Add to Chrome, free Add to Firefox