A review panel shows a prompt and lets users open a writing form by clicking a button. Clicking Write Review causes the component area to go blank with no recovery.
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.