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.

C/C++

void applyLayout(YGNodeRef node) {
  if (!YGNodeHasNewLayout(node)) {
    return;
  }

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

  // Do the real work
  ...

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

Java

void applyLayout(YogaNode node) {
  if (!node.hasNewLayout()) {
    return;
  }

  // Reset the flag
  node.markLayoutSeen();

  // Do the real work
  ...

  for (int i = 0; i < node.getChildCount(); i++) {
    applyLayout(node.getChildAt(i));
  }
}

JavaScript

void applyLayout(node) {
  if (!node.hasNewLayout()) {
    return;
  }

  // Reset the flag
  node.markLayoutSeen();

  // Do the real work
  ...

  for (let i = 0; i < node.getChildCount(); i++) {
    applyLayout(node.getChildAt(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 tree	Dirtied tree	Has new layout