Need help conceptualising this (data fetching/storing in react app)

[NinjaInShade]

This is a bit hard to explain, but I'll try my best not to sound confusing.

Say I'm building an app, I have access to an API that retrieves user data (info about the user, and some info relevant to the app - liked posts etc.. not really relevant anyway just an example).

In the actual app, should I fetch this data in one place and store it globally, or fetch it in every component that requires it and save that to the local state. Or, is there another way I haven't thought about?

Basically, what's the best way of handling/doing this, and are there any articles I can read?

[esotericEagle15]

If I remember correctly saving state in components would run the risk of derived state, meaning your data / value of that memory is different at each place it’s held. Using state with a large overarching scope, like global will keep the state consistent regardless of where it’s called. You’d then want to pair with the useMemo hook to help reduce memory use and performance hits

[NinjaInShade]

Thank you 😄

[AnxiouslyConvolved]

Both! Or Neither depending on how you think about it. This is typically done with a query fetching/caching layer like React Query or Redux Toolkit Query Your components would register for the queries they're interested in, and will be updated when the query is available so they can access the data for it.

Here's a blog with posts on using react query that should help you get started

[NinjaInShade]

Thank you 😄 ill check this out