protestant-coral

Many children subscribers vs passing from parent

Is there any performance considerations when you have many components that subscribe to a 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 component subscribe to the 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> 
}

9 Replies

optimistic-gold•2y ago

How many children are there? If you need a thousand subscribers, passing data might be more efficient

stormy-gold•2y ago

If you have a list of children with that subscribe to the SAME query, there is probably something wrong with your design

protestant-coralOP•2y ago

For example, if you have a component that is a list of songs The row wants to show album info, the option is to either useAlbum() in the parent, or in each row. Not thousands, but lets say 50

optimistic-gold•2y ago

Yeah call the hook in each child if it’s only 50 of them

genetic-orange•2y ago

this question is as old as state management itself. Suppose you have a redux store, do you call useSelector once in the table and pass data to each row, or do you call it again in each row ? the advantage of fine-grained selectors is that a component can live on its own (no need to pass data down), there is no prop drilling, so you can move it around freely in your app; do you need that for a SongsRow component that will likely only render inside the SongsTable ? it will also be render optimized, so it will only re-render if something for its selection will change. Do you need that in your table with 50 rows? the disadvantage is that there is one subscriber for each row, so more work to do for js, more timers etc. Does that matter in your case with 50 rows ?

protestant-coralOP•2y ago

@TkDodo 🔮 your final question is what I'm not sure about. I enjoy all the pros of having the component handle all its logic without prop drilling. But I'm not sure what the performance impact of 1 vs 100 subscribers is. Is there a rule of thumb of when props vs selectors are better? Or is this something that I have to run a profiler for

genetic-orange•2y ago

The rule is: try it out and measure it 🙂

protestant-coralOP•2y ago

Any recommended tools? Or just the browser profiler ?

genetic-orange•2y ago

React devtools have a profiler

Gaming

Programming

Many children subscribers vs passing from parent

Did you find this page helpful?