How to avoid repeated isLoading checks in nested components

[duxiaodi]

For example, suppose the following structure

<Page>
  <SubPage>
    ...
      <Child/>
    ...
  </SubPage>
</Page>

const Page = () => {
  const { data, loading } = useQuery({
    queryKey:['user-info']
  })

  if (loading) return <LoadingComponent />

  return ...children
}

const Child = () => {
  const { data, loading } = useQuery({
    queryKey:['user-info']
  })

  if (loading) return <LoadingComponent />

  return .....
}

Because the loading status has been checked in the Page component, theoretically, the data must exist in the Child component, so it seems redundant to check the loading status again in the Child component.

I know this problem can be solved using solutions like context, and even this problem is not just the scope of react-query, but I want to know if react-query, as an asynchronous state management tool, has a more elegant solution to this problem.

[Sylvenas]

If the Child component does not make a state judgment, the Child component will be almost impossible to reuse.
If it does make a judgment, it will be very cumbersome.

Looking forward to best practice ideas.