Prop Drilling Depth — tsmetrics Docs

What it measures

Prop drilling occurs when data is passed through many component layers just to reach a deeply nested child. tsmetrics reports two values:

max_prop_pass_depth — the maximum JSX nesting depth at which any props are being passed (an upper bound for drilling)
has_spread_forwarding — whether {...props} spread attributes appear (direct evidence of forwarding)

How it's computed

tsmetrics walks the JSX tree, tracking nesting depth. At each JSX element it records the depth at which props (including spread {...props}) are passed. The maximum of these depths is reported.

max_prop_pass_depth = max(depth at which any JSX element receives props) has_spread_forwarding = any {...props} spread attribute found

Note: This is a static approximation. tsmetrics cannot trace data flow across file boundaries, so max_prop_pass_depth is an upper bound — the actual drilling chain may be shorter.

Example

TypeScript — depth 3, spread forwarding detected

function Page({ user }) {          // depth 0
  return (
    <Layout>                        // depth 1
      <Section user={user}>           // depth 2 — prop passed
        <Profile {...user} />          // depth 3 — spread forward
      </Section>
    </Layout>
  );
}

Fix: If max_prop_pass_depth is 3 or more, consider using React Context, a state management library, or component composition to avoid threading props through layers.

← PreviousComponent Responsibility NextRender Complexity →

Edit on GitHub