What is the best way to fetch data only once in react?

Question

so let's say I have a react dashboard application, which has several different routes. Now, one of those routes is Analytics route, and I was wondering, if is, what is the best way to fetch the data rendered in Analytics route only the first time you visit it and then pull it from somewhere.

I've been thinking about using Redux for it, but I've never used it, so I have no idea, OR if I should store it in localStorage. But that has a problem though, because on different route, I would like to fetch images the same way.

The reason I'm asking this is because I use Firebase Firestore as my DB and it could get quite costly, because I would have to do 4 read operations i.e. on the Analytics route each time it is rendered. Or, is it the normal approach?

Is it a good idea to use React Context and useContext hook in this case?

Thanks in advance.

Answer 1

use react-query you can do exactly this in a much simpler way as compared to context or react-redux.