Skip to main content

Incremental layout

Most real-world UIs are not static. Yoga trees may be laid out incrementally to avoid large work when only a small portion of the UI changes. Yoga will automatically mark a node and its ancestors as "dirty" if the node's style or children are changed. During the first layout, all nodes are considered dirty, and every node is visited. On subsequent layout, any nodes that are not dirty are skipped, so long as their parent constraints have not changed.

Yoga exposes whether the layout of a node or its children have changed via a HasNewLayout flag. This flag may be read when applying Yoga layout results to avoid traversing any subtrees where there are no updates.

void applyLayout(YGNodeRef node) {
if (!YGNodeHasNewLayout(node)) {

// Reset the flag
YGNodeSetHasNewLayout(node, false);

// Do the real work

for (size_t i = 0; i < YGNodeGetChildCount(node); i++) {
applyLayout(YGNodeGetChild(node, i));

In the below example, we start with an already laid out tree. The style of F is then modified, dirtying the node and its ancestors. After layout, the dirtied nodes, and any effected children, are marked as having new layout.

Clean treeDirtied treeHas new layout
Clean treeClean treeHas new layout