A Look Behind The Scenes
- Widget, Element & Render Trees
- How Flutter Updates UIs
- Understanding Keys
12/9 141-149
Three Trees

Refactor & Extract Widgets to Avoid Unnecessary Builds(seperation of concerns)


at initial rendering and whenever click the buttons, it prints 2 codes as below.

because of this, below stateless codes are also build again. Thus, need to do
separation of concerns to make render only the stateful part!
