In React, store fetched Firebase data in local or global state?

Question

I am building an admin dashboard for a little business dealing with renting rooms. They have 6 rooms only, so I don't need a big database. I use Firebase for that. My question is, should I have one big state in my App.js component, with a .on method on Firebase in componentWillMount which will sync the database to a single state and pass down those changes with props to the different sections, or should I fetch the data from firebase in each component individually and store them in local states? Which one is a better practice? Is there advantages disadvantages for both sides?

Thanks, Balázs

PS.: I am planning to implement react router to be able to link to different parts of the dashboard easily. Does that change anything?

Answer 1

I would just fetch the data once, in a container component, and then pass it down to child components via props.

Also, data should be fetched in componentDidMount as per the react docs

Lastly, even if your app is relatively small, it might be beneficial to look into Redux to manage your state, which will hopefully help you organize your data and debug your code.

Good Luck!