Skip to content

docs: note exception-safe cleanup of JS Yoga trees - #1999

Open
greekr4 wants to merge 2 commits into
react:mainfrom
greekr4:docs-js-tree-cleanup
Open

greekr4 wants to merge 2 commits into
react:mainfrom
greekr4:docs-js-tree-cleanup

Conversation

@greekr4

@greekr4 greekr4 commented Jul 22, 2026

Copy link
Copy Markdown

Summary

The JavaScript docs already warn that nodes must be freed manually, but don't mention two things we ran into in production (a WASM-based canvas editor that builds a throwaway Yoga tree per layout pass):

  1. Nodes live in the WebAssembly heap, so leaked nodes are invisible to the JS garbage collector and accumulate until Node.create() fails.
  2. If a measure function (or any code between create and free) throws, the whole tree leaks unless freeing happens in a finally block.

This adds a short paragraph and a try/finally example to the existing warning in the JavaScript tab of "Laying out a Yoga tree".

Test Plan

Docs-only change. Verified the MDX renders (admonition + code fence) and the relative link to external-layout-systems.mdx resolves.

@meta-cla meta-cla Bot added the CLA Signed label Jul 22, 2026
@facebook-github-tools facebook-github-tools Bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Jul 22, 2026
Comment on lines +105 to +111
const root = buildYogaTree();
try {
root.calculateLayout(undefined, undefined, Direction.LTR);
readLayoutResults(root);
} finally {
root.freeRecursive();
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new snippet references buildYogaTree() and readLayoutResults(root), which are not defined anywhere in the docs, and uses Direction.LTR without an import (the snippet above this warning imports only Edge, FlexDirection, PositionType from yoga-layout). Other snippets in this page are self-contained and copy-pasteable; readers copying this block would hit unresolved identifiers. It also re-declares const root, which conflicts with the const root declared in the preceding snippet of the same JavaScript tab if both blocks are pasted together. Consider inlining the tree construction/result reading (or using comments as placeholders) and importing/mentioning Direction.

Suggested change
const root = buildYogaTree();
try {
root.calculateLayout(undefined, undefined, Direction.LTR);
readLayoutResults(root);
} finally {
root.freeRecursive();
}
try {
root.calculateLayout(undefined, undefined, Direction.LTR);
// Read layout results, e.g. child0.getComputedLeft()
} finally {
root.freeRecursive();
}

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, thanks — applied your suggestion in 51cbdce so the block reuses root/child0 from the snippet above, and added Direction to that import (which also covers the calculateLayout snippet further down the page).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants