React: Is there any way to cache components or prevent redundant HTTP calls with each render

Question

The simple Code Sandbox below shows that navigating to a component triggers a fresh render. The React profiler states the components were rendered because they are continually seen for the first time. I understand this to be the correct React behavior, because each mounting/render generates new method references that triggers the re-rendering. However, this means that several http requests will be made despite nothing having changed. Is there any way to keep those requests from being made every time the user navigates to a component?

In the codesandbox I've tried using React.memo along with useCallback , and neither reuse the initial rendering.

Click the console tab to see each time the component renders, it makes a fresh ajax call.

https://codesandbox.io/s/github/pstephenwille/react-render-question

Answer 1

To avoid redundant HTTP calls you have to verify that your origin server does not have updated your local data. If you really want to just fire the HTTP calls once, you can eg execute them in your App component or pass a state and a callback function down to your Foo and Bar screen components that will ensure a singular call