Docs› Metrics› Component Responsibility Score
React / FP

Component Responsibility Score

A weighted score that detects God Components doing too much.

What it measures

The Component Responsibility Score (CRS) is the React equivalent of the God Class detection strategy. It combines four signals into a single score to identify components that have accumulated too many responsibilities.

How it's computed

CRS = (props × 1.0) + (state × 2.0) + (effects × 3.0) + (jsx_elements × 0.5) props = number of component parameters (props) state = useState + useReducer calls at component scope effects = useEffect + useLayoutEffect + useInsertionEffect calls jsx_elements = total JSX elements and fragments in the component
SignalWeightWhy higher?
Props1.0×More props = more external dependencies
State (useState/useReducer)2.0×State is internal complexity
Effects3.0×Effects are the most complex — async, cleanup, ordering
JSX elements0.5×Render size, weighted lower to avoid penalizing presentational components

Interpretation

ScoreAssessment
< 10Focused — single responsibility
10 – 20Moderate — review for opportunities to extract hooks or sub-components
> 20God Component — strong candidate for splitting

Example

TypeScript — CRS ≈ 26 (God Component)
function Dashboard({ userId, theme, onLogout, onRefresh }) { // 4 props → 4.0
  const [data, setData] = useState([]);   // state → 2.0
  const [loading, setLoading] = useState(true); // state → 2.0
  const [error, setError] = useState(null); // state → 2.0
  useEffect(() => { /* fetch */ }, [userId]); // effect → 3.0
  useEffect(() => { /* analytics */ }, []);  // effect → 3.0
  return (
    <div><Header /><Sidebar /><Chart /><Table /><Footer /></div>
    // 6 JSX elements → 3.0
  );
  // Total CRS ≈ 4 + 6 + 6 + 3 = 19 + jsx overhead → ~26
}
Edit on GitHub