How request API data in React only one time and not render the page every time that is visited?

Question

So in websites with multiple pages, where which one makes use of external data from an API, what is the best logical way to make the request only one time, when the page is loaded for the first time? So, for example, I go to the page ABOUT (using React Router) for the first time and it makes the Axios request and loads the data, then I change to the HOME page, and when I go back to ABOUT it does not load the data again.

Because what I currently do is a request every time the page loads and that's very clunky for user experience. I make the requests using Axios in the componentDidMount method. Can React Hooks with Context API help to solve this?

I have seen this post, but remain confused: React rerender every time page is visited

Thanks in advance, sry if I couldn't be clearer!

Answer 1

You could look into caching - it will not require changes in your current code, but only when setting up axios. When you will make a request for the same data with little time changing since the last request, it will serve from cache instead of call the server.

An example for a library that can take care of caching in axios is axios-cache-adapter.