sootsim react

inspect React component render cost in the tenant worker

sootsim react

Start a tenant-worker React render collector, interact with the app, then print slow component and rerender tables from the same bridge-backed sim. This is component-level React profiling; use sootsim cpu-profile for sampled JS CPU flame charts.

terminal

sootsim react profile start [--include-props] [--max-commits N]
sootsim react profile stop
sootsim react summary [--limit 10] [--json]
sootsim react slow [--limit 5] [--json]
sootsim react rerenders [--limit 5] [--json]
sootsim react tree [--depth 3] [--find <name>] [--json]
sootsim react why <fiber-id> [--json]

Options

flagdescription
--include-propsrecord shallow prop value previews for why output
--max-commits <n>bounded commit ring size (default: 2000)
--limit <n>rows to print for summary/slow/rerenders (default: 10)
--depth <n>tree depth for react tree (default: 3)
--find <name>filter react tree by component name
--jsonprint structured output
--sim <sim>target a specific sim

Examples

terminal

sootsim react profile start
sootsim react profile stop
sootsim react summary --limit 10
sootsim react slow --limit 10
sootsim react rerenders --json
sootsim react tree --find Avatar

Ready to build?

Run your React Native app in the browser. No simulators, no native toolchain, no waiting.

npm i -g sootsim