Best practice in React regarding parent and children using the same hook to fetch data, passing the data down via props, or specific hooks

Let’s say we have a component tree in react


and a useTree hook that wraps a useQuery hook that fetches something like

tree {
  leaves {
  trunk {

We could call useTree in <Tree> and then pass trunk and leaves data to <TreeLeavesDetails details={leaves}/> and <TreeTrunkDetails details={trunk}/> respectively.

We could also hook <Tree> and <TreeLeavesDetails/> and <TreeTrunkDetails/> with the same useTree hook. Given that results will be cached in the client (assuming we can cache) the performance will be ok

Or we could create a useTree, useTreeTrunk and a useTreeLeaves hooks and the hook each component with its specific hook (and query requesting only the data it needs).

What pattern is recommended by the Apollo team?
Thank you

1 Like