Many children subscribers vs passing from parent

Is there any performance considerations when you have many components that subscribe to a

useQuery

useQuery

Is it better to do this

const {data} = useQuery(...)

return <div>
  <Child data={data} />
  <Child data={data} />
  <Child data={data} />
  <Child data={data} />
  ...
  <Child data={data} />
  <Child data={data} />
</div>

const {data} = useQuery(...)

return <div>
  <Child data={data} />
  <Child data={data} />
  <Child data={data} />
  <Child data={data} />
  ...
  <Child data={data} />
  <Child data={data} />
</div>

Or just let the

Child

Child

component subscribe to the

useQuery

useQuery

itself

const Child = () => {
const {data} = useQuery(...)

return ...
}

const Parent = () => {
  return <div>
    <Child />
    <Child />
    <Child  />
    <Child  />
    ...
    <Child />
    <Child/>
  </div> 
}

const Child = () => {
const {data} = useQuery(...)

return ...
}

const Parent = () => {
  return <div>
    <Child />
    <Child />
    <Child  />
    <Child  />
    ...
    <Child />
    <Child/>
  </div> 
}

TanStack•2y ago•

9 replies

foolish-indigo

Many children subscribers vs passing from parent

Is there any performance considerations when you have many components that subscribe to a

useQuery

useQuery

Is it better to do this

const {data} = useQuery(...)

return <div>
  <Child data={data} />
  <Child data={data} />
  <Child data={data} />
  <Child data={data} />
  ...
  <Child data={data} />
  <Child data={data} />
</div>

const {data} = useQuery(...)

return <div>
  <Child data={data} />
  <Child data={data} />
  <Child data={data} />
  <Child data={data} />
  ...
  <Child data={data} />
  <Child data={data} />
</div>

Or just let the

Child

Child

component subscribe to the

useQuery

useQuery

itself

const Child = () => {
const {data} = useQuery(...)

return ...
}

const Parent = () => {
  return <div>
    <Child />
    <Child />
    <Child  />
    <Child  />
    ...
    <Child />
    <Child/>
  </div> 
}

const Child = () => {
const {data} = useQuery(...)

return ...
}

const Parent = () => {
  return <div>
    <Child />
    <Child />
    <Child  />
    <Child  />
    ...
    <Child />
    <Child/>
  </div> 
}

Many children subscribers vs passing from parent

Similar Threads

Many children subscribers vs passing from parent

Similar Threads

Similar Threads

Similar Threads