Does whole subtree rebuilds on setState in flutter

user_6799074 0
Viewed 875

I am new to flutter and really wondering if all the subtree of widgets gets rebuild when we call setState.

Subtree here means all the widget tree below that widget (including that widget as root node).

When we call setState function, the build method is called on the root node of the subtree, which triggers the build methods on its child. Say a branch (here MyWidget1) of a subtree (a child of that widget) is independent of the state variables. I noticed that even independent branches are rebuilt on setState called in the parent node.

class _MyAppState extends State<MyApp> {
  int count=0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: <Widget>[ MyWidget1(),MyWidget2(count),],),
      floatingActionButton: FloatingActionButton(onPressed: ()=>setState((){count++;}),), 
    );
  }
}

class MyWidget1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) { print("widget builds 1");
    return Container(height: 100, color: Colors.orange,);
  }
}
class MyWidget2 extends StatelessWidget {
  final int count;
  MyWidget2(this.count);
  @override
  Widget build(BuildContext context) { print("widget builds 2");
    return Text(count.toString());
  }
}

Here we can see that MyWidget1 is independent of the state variable (here count), so generally, setState should have no impact on it. I was wondering if there should be any optimization to avoid that useless build of MyWidget1 on the call of setState function. As the tree below MyWidget1 can be too big, that too will be rebuild again.

My Questions:

  1. Is it Ok for this Independent Widget (here MyWidget1) to build again on setState?

  2. Is there a better way to deal with this situation to avoid its rebuild.

Note: I have read this question

In this question, there is a way to avoid useless build by creating an instance of the independent branch outside the build method,

My doubt is :

Is this the WAY to deal with this situation or some other better way or this situation isn't that big at all as tree builds in O(n) time (which I think shouldn't be the answer because building tree might be O(n) operation but it may include many time-consuming operations which may not be optimization friendly to call again and again uselessly).

flutter
2 Answers

Yes, MyWidget1 is rebuilt upon that setState. Just trust the code. After you call setState, build is called, which calls the constructor of MyWidget1. After each setState, the entire subtree is rebuilt. Old widgets are thrown away. States are not thrown away, though. State instances live on, they are not recreated (see didUpdateWidget).

So, yes. After each setState, the entire subtree is rebuilt.

This is OK, don't worry.

The widget classes here are very lightweight classes. Dart's garbage collector is optimized to instantiate many such objects and throw them away together.

This tree that you get to recreate again and again is just a facade. There are two more parallel trees that are not lightweight and are not recreated. Your widget trees are diff'ed together to find how the actual ui elements should be modified by the system.

Why all this trouble, you may ask. Because creating trees is easy and maintaining them is difficult. This reactive declarative framework lets us get away with only creating the tree and not maintaining it.

There are some resources about Flutter internals that you can read more about this. One such resource is this video: https://www.youtube.com/watch?v=996ZgFRENMs

user_6795530 
class _MyAppState extends State<MyApp> {
  int count=0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: <Widget>[ const MyWidget1(),MyWidget2(count),],),
      floatingActionButton: FloatingActionButton(onPressed: ()=>setState((){count++;}),),
    );
  }
}

class MyWidget1 extends StatelessWidget {
  const MyWidget1();
  @override
  Widget build(BuildContext context) { print("widget builds 1");
  return Container(height: 100, color: Colors.orange,);
  }
}
class MyWidget2 extends StatelessWidget {
  final int count;
  MyWidget2(this.count);
  @override
  Widget build(BuildContext context) { print("widget builds 2");
  return Text(count.toString());
  }
}

when the constructor starts with a "const" keyword, which allows you to cache and reuse the widget.

When calling the constructor to initiate the widget, use the "const" keyword. By calling with the "const" keyword, the widget does not rebuild when any parent widgets change their state in the tree. If you omit the "const" keyword, the widget will be build every time the parent widget redraws.

user_128259970
Related