Почему бы не поместить хук useState в оператор if?

Интуитивно мне понятно, почему, но я ищу подробное объяснение того, как компилируется React, что может вызвать побочный эффект с чем-то вроде этого.

const Header = () => {
   const [counter, setCounter] = useState(0);
   if (counter > 3) {
      const [subtext, setSubtext] = useState("Secret message unlocked.");
   }
   const [headertext, setHeadertext] = useState("Hello World!");
   
   const click = () => {
      setCounter(counter + 1);
   }

   return {
      <div>
         <h1>{headertext}</h1>
         <h2>{subtext}<h2>
         <button onClick = {click}>Click Me!</button>
      </div>
   }
}