NUC — Number of Used Components

React Metric | AST-based

Count of distinct React components used (rendered) inside a component's JSX tree, identified by PascalCase JSX tags.

Formula

NUC = |distinct PascalCase JSX tag names|

Counts jsx_opening_element and jsx_self_closing_element nodes whose tag name begins with an uppercase letter.

TypeScript / TSX Example

function Dashboard() {
  return (
    <Layout>
      <Header title="Dashboard" />
      <Sidebar />
      <DataTable rows={rows} />
      <DataTable rows={other} />  // same tag, not double-counted
    </Layout>
  );
}
// NUC = 4  (Layout, Header, Sidebar, DataTable)

What counts as a component

Pattern	Included?
PascalCase JSX opening tag `<Foo>`	✅
PascalCase self-closing tag `<Foo />`	✅
HTML intrinsic tags `<div>`, `<span>`	❌ (lowercase)
Repeated uses of the same component	Counted once

Thresholds

NUC is informational — no configurable thresholds. Large NUC (e.g., > 10) may indicate a component with too many direct dependencies, reducing reusability.

Related metrics

JSX Nesting · WMC

← NOI JSX Nesting →