Calling a hook conditionally

NewQuizReactmedium~3 minrules of hooks, useState

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

The component first renders with user = null, then re-renders with a real user. What happens on the second render?

It works: hooks only need to be consistent within a single render

React throws because it rendered more hooks than during the previous render

tab is undefined on the second render but recovers on the third

The lint rule rewrites the code so the hook is hoisted