Skip to content

filterEmptyNodes

Package: @autotracer/react18  ·  Layer: Runtime  ·  Type: "none" | "first" | "all"  ·  Default: "all"


filterEmptyNodes is a runtime configuration option for reactTracer() — the initializer of the @autotracer/react18 React component render tracing library. It controls how sequences of consecutive empty nodes are collapsed in the component tree output. Collapsed sequences are replaced by a single marker: ... (N empty levels), preserving the depth of the first collapsed node and the count.

Instrumented components are never considered empty — they always appear in the output regardless of this setting. Components are normally instrumented by @autotracer/plugin-vite-react18, which injects useReactTracer automatically.

includeNonTrackedBranches affects what this setting can filter. When includeNonTrackedBranches is false, branches without tracked components are excluded before empty-node filtering runs.

What Counts As Empty

An empty node is a non-tracked, non-marker node with no component logs that the current visibility settings treat as hidden.

For Mount, Rendering, Reconciled, and Skipped nodes, that decision is based on the matching visibility setting (includeMount, includeRendered, includeReconciled, or includeSkipped) and on whether the node has prop changes, state changes, or both.

Tracked components are never empty. Marker nodes are never empty. Identical-value warnings do not make a node non-empty by themselves.

Values

"all" (default)

Collapses all sequences of consecutive empty nodes throughout the entire tree. Provides the most compact view by removing all noise.

All your instrumented components are visible.

typescript
reactTracer({ filterEmptyNodes: "all" });

"first"

Collapses only the initial sequence of empty nodes at the start of the tree. Preserves all empty nodes that appear after the first non-empty node. Useful for cleaning up top-level wrapper components while maintaining full visibility deeper in the tree.

Some uninstrumented components and html nodes will appear. Can be too noisy for many real sites and apps.

typescript
reactTracer({ filterEmptyNodes: "first" });

"none"

No filtering — every node is shown regardless of content. This is usually not usable.

It's mainly meant for when you have no instrumentation at all but still wants to see what renders and why.

typescript
reactTracer({ filterEmptyNodes: "none" });

Released under the MIT License.