A review panel shows a prompt and lets users open a writing form by clicking a button. The writing form includes a character counter that updates as the user types.
Clicking Write Review causes the component area to go blank. No form appears.
Consider whether everything in this component runs on every render, or only sometimes.
Consider whether everything in this component runs on every render, or only sometimes.
Why this fixes it
On the first render `reviewing` was `false`, the `if` block was skipped, and React registered one hook. When the click set `reviewing` to `true`, the next render encountered two `useState` calls instead of one. React associates state with hooks by call order - the index in its internal fiber array is the only identifier - so a change in hook count between renders is unrecoverable. React throws immediately. Moving `const [charCount, setCharCount] = useState(0)` above the `if` block means it always executes. The value is simply unused in the non-reviewing branch, which is harmless.