Conditional Hook Call (ARCH3300)

Key typescript.react.conditional-hook · Severity error · Category quality

React: flags a hook called inside a branch, a loop or after an early return. React matches hooks to state by call order, so a conditional hook makes that order change between renders.

Incorrect

function Profile({ user }) {
  if (!user) return null;
  const [tab, setTab] = useState("posts");
  return <Tabs value={tab} onChange={setTab} />;
}

Correct

function Profile({ user }) {
  const [tab, setTab] = useState("posts");
  if (!user) return null;
  return <Tabs value={tab} onChange={setTab} />;
}