React Context Hook vs Bringing Data Directly into Components

Question

I'm a big fan of using React hooks, and I also like developing on top of Firebase.

Given Firebase's real-time database capabilities, I'm leaning towards calling data that I need for a given React Component directly into the Component itself, or into a proximate parent Component, rather than pulling the data into something like a Redux store or into Components via the React useContext hook API.

Is there some reason that I shouldn't just pull data into a Component and, often times, store it in that Component's state with the useState hook? It just seems like, for many apps, pulling the data used by some Component into an app-wide state via Redux or even via a useContext hook is a bit overkill.

Can you help me understand if my thinking is right here, and if there's a situation when using the useContext hook would make more sense (other than obvious use cases, like an app theme or skin). I'm just having trouble deciding which approach to take with my Components.

Thanks,

Davis

Answer 1

The main downside to the approach you've described is the possibility of making multiple redundant calls. If more than one component need the same piece of data, you will spend unnecessary resources fetching that data more than once. This is what React's Context API is made to solve. If you have a user object and two components that need to know the user's name, you can store the user object in the context, and then access that context throughout your app, making the call to fetch the user only once.