diff --git a/website/docs/getting-started/laying-out-a-tree.mdx b/website/docs/getting-started/laying-out-a-tree.mdx index 66d437d630..c9c8e4737b 100644 --- a/website/docs/getting-started/laying-out-a-tree.mdx +++ b/website/docs/getting-started/laying-out-a-tree.mdx @@ -78,7 +78,7 @@ Java backed Yoga Nodes are garbage collected, and do not need to manually be fre ```ts -import Yoga, {Edge, FlexDirection, PositionType} from 'yoga-layout'; +import Yoga, {Direction, Edge, FlexDirection, PositionType} from 'yoga-layout'; const root = Yoga.Node.create(); root.setFlexDirection(FlexDirection.Row); @@ -99,6 +99,17 @@ root.insertChild(child1, 1); Yoga Nodes are not freed automatically and should be discarded when no longer needed. Individual nodes may be freed by calling `node.free()`, or an entire Yoga tree may be freed by calling `node.freeRecursive()`. +Nodes live in the WebAssembly heap, which is not visible to the JavaScript garbage collector. An application which repeatedly leaks nodes will grow the heap until new nodes fail to allocate. If an exception may be thrown after nodes are created (e.g. from within a [measure function](../advanced/external-layout-systems.mdx) during layout), freeing in a `finally` block guarantees the tree is released: + +```ts +try { + root.calculateLayout(undefined, undefined, Direction.LTR); + // Read layout results, e.g. child0.getComputedLeft() +} finally { + root.freeRecursive(); +} +``` + A future revision of JavaScript bindings for Yoga may move to garbage collection to remove this requirement. :::