Javascript – database query in every single react component?

This is a bit subjective but there are also certain strategies I think are mostly applicable. So I’ll share what I think, but this is my approach so nothing is necessarily best practice or anything.

To answer your question directly, in the context, which is fairly specific. I would without doubt fetch in the parent component and pass to the children.

I see a number of enterprise applications that fetch very granularly which is convenient in a sense and the code can seem quite cool because every component is like self contained unit fetching and doing everything but I don’t think its the best approach. As a user I did’t love the loading state UI on every component on every click etc… and I just don’t think it’s the best approach.

So for your case I would definitely fetch in parent. But beyond that I would actually take it maybe a step further and look at some pattern where I fetch in a Page component, so to speak, and pass all the data to components, in your case, parent, and children. I think this satisfies the kind of need we have as programmers to have consistency across types of code and also allows the queries to be efficient.

Because at the end of the day, you’re still making an http request for each component if you do it per child, and on top of that you’re making a new database query. So one join query will be more efficient. And I’m fairly okay with the idea of not worrying too much about performance until it’s an issue but I also appreciate the concern of not wanting to do much work on some structure you may want to change soon.

Given that, I would say it’s even more important that you consider a little bit splitting your business logic with ui logic, its common in react to just fetch in useEffect or similar but I believe it’s nice to separate the business logic out, so in react its common to do this with custom hooks like use<PageX>Data etc.. and on top that, depending on how much you want to abstract the logic, you could also abstract the requests to have const fetchXdata = (...args)=>fetch(<url>, ....) and then call that in your hooks.

And just to add, if there comes a point, where to much data is fetched at once, and it’s not needed and not being displayed (which is likely the case as you can only show so much data once, and it’s unlikely you reduce data so much to display it on UI through calculations etc..), you can look into pagination as a strategy, still on the page level. But this will likely become apparent as a need when it’s needed and should fairly straightforward to implement.

Hope it helps, whatever you go with, I think it’s important you come with a solution that you’re comfortable maintaining so if you were to have to refractor almost everything for some reason you wouldn’t be too annoyed and you’re able to happily adapt to the needs of the business/app.