Docs› Metrics› Effect Density
React / FP

Effect Density

Ratio of side-effect hooks to component SLOC.

What it measures

Effect Density measures what fraction of a component's source code is dedicated to side effects. A high density means side-effect logic dominates the component — often a sign it should be split or that effects should be extracted into a custom hook.

The following hooks are counted as effects: useEffect, useLayoutEffect, useInsertionEffect.

How it's computed

Effect Density = effect_count / component_sloc effect_count = useEffect + useLayoutEffect + useInsertionEffect calls component_sloc = non-blank lines in the component function body

Only effect calls at the direct component scope are counted — effects inside nested callbacks are excluded.

Example

TypeScript — effect density: 2/20 = 0.10
function Dashboard() {
  const [data, setData] = useState([]);

  useEffect(() => {           // effect 1
    fetchData().then(setData);
  }, []);

  useEffect(() => {           // effect 2
    document.title = `${data.length} items`;
  }, [data]);

  return <List items={data} />;
}
// 2 effects / ~20 SLOC = 0.10
Tip: Effect density above ~0.15 often indicates a component managing too many side effects. Extract into a custom hook like useDashboardData().
Edit on GitHub