'Which approach is better out of these 2 with react-query fetch?

To get the maximum benefit of react-query caching which approach is more performant or how could i measure the performance of each data fetching approach with react-query.

Approach 1

 <parent />
   useQuery('todos', fetchTodoList)
    <Child1 />
      useQuery('todos', fetchTodoList)
    <Child2 />
      useQuery('todos', fetchTodoList)
    <Child3 />
      useQuery('todos', fetchTodoList)
    <Child4 /> 
      useQuery('todos', fetchTodoList)

Approach 2

 <parent />
    <Child1 />
      useQuery('todos', fetchTodoList)
    <Child2 />
      useQuery('todos', fetchTodoList)
    <Child3 />
      useQuery('todos', fetchTodoList)
    <Child4 /> 
      useQuery('todos', fetchTodoList)


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source