1

I'm using react-query and set suspense true.

I found that my web app became slow. That's because suspense makes network waterfall. Below img is this case.

network tab image

However when I configure suspense to false, it works in parallel.

network tab image

I know that Suspense catches a Promise and shows Loading fallback until it is settled. So I understand why it make waterfall.

Then, is Suspense only useful as a page requests only one API call? Or, Is there a solution for this?

euijin-kim
  • 21
  • 4
  • Suspense is only useful for when a page only requests one API call. If you need to make multiple API calls, you can use React.lazy() to load components dynamically. – Mohamed Elgazar Oct 16 '22 at 09:07
  • Oh, thank you. You mean If I use React.lazy() each component and it calls API, it doesn't make waterfall? – euijin-kim Oct 16 '22 at 09:13
  • Yes, that's correct. React.lazy() will only load the component when it is needed, so it won't make a waterfall of API calls. – Mohamed Elgazar Oct 16 '22 at 09:17

1 Answers1

1

Suspense is only useful for when a page only requests one API call. If you need to make multiple API calls, you can use React.lazy() to load components dynamically.

React.lazy()

will only load the component when it is needed, so it won't make a waterfall of API calls.

Mohamed Elgazar
  • 778
  • 4
  • 9
  • Really? until now, I have used Suspense but I don't know that. I will test it. Thank for your answer!! – euijin-kim Oct 16 '22 at 09:28
  • Can you help me? I tested it but I didn't get good result. I tried 3 case. First, 2 Query in 1 Component , Second, 1 Query in 1 Component, wrapped with a Suspense, Third, 1 Query in 1 Component, wrapped with each Suspense. You can check it in https://codesandbox.io/s/suspicious-euclid-6ld1yn . I wonder if it is possible that 2 Query in 1 component wrapped with Suspense can not make waterfall. – euijin-kim Oct 16 '22 at 12:23