Hook Complexity

What it measures

Hook Complexity captures how much state and side-effect logic a React component manages directly. Two numbers are reported:

• hook_count — total number of hook calls (e.g. three useState calls = 3)
• distinct_hooks — number of distinct hook types used (e.g. useState + useEffect = 2)

Both built-in React hooks and custom hooks (any identifier starting with use followed by an uppercase letter) are counted.

How it's computed

tsmetrics scans the component function body for hook call expressions at the direct component scope — hook calls inside nested callbacks (e.g. inside a useEffect handler) are not attributed to the component.

Example

function UserProfile() {
  const [user, setUser] = useState(null);    // hook 1
  const [loading, setLoading] = useState(true); // hook 2
  const ref = useRef(null);                   // hook 3
  useEffect(() => {
    fetchUser().then(setUser);
    // useState inside here is NOT counted
  }, []);                                       // hook 4
  return <div ref={ref}>{user?.name}</div>;
}