How I Bypassed React's Synthetic Event System to Automate Form Filling

How I Bypassed React's Synthetic Event System to Automate Form Filling I had a Chrome extension that needed to fill a job application form automatically. The form had 16 fields. I wrote what seemed like obvious code: document . querySelector ( ' input[name="firstName"] ' ). value = " John " ; The field showed "John". Perfect. Then I clicked Submit. The form screamed back: "This field cannot be left blank." I stared at the screen. The input clearly showed "John". The form was telling me it was empty. I refreshed, tried again, same thing. That moment of confusion is what sent me down a two hour rabbit hole into React internals I did not know existed. Why el.value = "x" Does Nothing on React Inputs Here is the thing most people do not know about React: it does not store form state in the DOM. React maintains something called the fiber tree , which is its own internal data structure that lives completely separately from what you see in the browser. The DOM is basically just a visual output