StreamBuilder updates' performance (One vs Multiple)

Viewed 407

what is the performance difference between updating a single parent widget with multiple children versus updating each child on their own.

which is more performant and by how much :

StreamBuilder(
  stream:sameStream,
  builder(ctx,snapshot){
    return Column(
      children:[
       Text("1"),
       Text("2"),
       Text("3")
      ]
    ) 
  }
)

Or

Column(
  children:[
    StreamBuilder(
      stream:sameStream,
      builder(ctx,snapshot){
        return  Text("1"):
      }
    ),
    StreamBuilder(
      stream:sameStream,
      builder(ctx,snapshot){
        return  Text("2"):
      }
    ),
    StreamBuilder(
      stream:sameStream,
      builder(ctx,snapshot){
        return  Text("3"):
      }
    )
  ]
)

An Other question : What happens if we scale the children widgets to 100 ? does the performance change ?

1 Answers

Having more Listeners to the same Stream (or any other state) will decrease the performance. Check this benchmark when adding Listeners

value notifier benchmarks : https://github.com/knaeckeKami/changenotifier_benchmark

ChangeNotifier benchmarks : https://github.com/flutter/flutter/pull/62330

Having a list of expensive widgets with only one Listener will also decrease the performance (when they all get rebuild).

Anyways if you are using the same Stream with multiple children you should only use one Listener because when the state is changed they will all get a rebuild call whether they are on the same Listener or any of them have a Listener, but in the second case when the state is changed the Stream has to do more work notifying every Listener it has.

I got your problem, it occurs when you are having a list (of state) and yeah if you could have one Listener it would be faster for the notifying when the state changed but also it might be expansive to rebuild all the children which they don't have any update.

A solution for that case is using ProviderScope form Riverpod which can be used with to overwrite another provider for particular widget or using .select method.

Related