Docs› Metrics› Render Complexity
React / FP

Render Complexity

Cyclomatic-style count of conditional rendering branches in JSX.

What it measures

Render Complexity applies the same idea as Cyclomatic Complexity to a component's JSX output. Each conditional branch or list rendering in JSX adds a new path through the rendered UI, making it harder to reason about and test.

How it's computed

Render Complexity = base + conditional_and + ternary + map_calls base = 1 if component has any JSX, else 0 conditional_and = && expressions inside JSX ternary = ternary expressions (? :) inside JSX map_calls = .map() calls inside JSX

Only patterns within the JSX return value are counted. Imperative code before the return statement is excluded.

Example

TypeScript — render complexity: 5
function Feed({ items, loading, error, isAdmin }) {
  return (
    <div>
      {loading && <Spinner />}              // +1 (&&)
      {error ? <Error /> : <Content />}     // +1 (ternary)
      {isAdmin && <AdminBar />}             // +1 (&&)
      {items.map(i => <Item key={i.id} />)} // +1 (.map)
    </div>
  );
  // base(1) + &&(2) + ternary(1) + map(1) = 5
}
Tip: A render complexity above 5 is a good signal to extract sub-components. Replace conditional blocks with named components like <LoadingState /> or <ErrorBoundary />.
Edit on GitHub