[React](/courses/reactjs) event handling is straightforward, but a few common mistakes can create confusing bugs or make components harder to maintain. ### 1. Pass Handlers Instead of Calling Them Correct: ```jsx ``` Incorrect when you intend to wait for a click: ```jsx ``` The second form executes during rendering. ### 2. Use an Arrow Function When Arguments Are Needed ```jsx ``` This waits until the click before calling the [function](/javascript/functions-in-javascript). ### 3. Use Semantic HTML Elements For a click action, prefer: ```jsx ``` rather than turning a generic element into a button: ```jsx

Save

``` A real button already provides useful keyboard and accessibility behavior. ### 4. Put User-Initiated Actions in Event Handlers If something should happen specifically because the user clicked Save, put it in the Save handler: ```jsx async function handleSave() { await saveArticle(); } ``` Do not unnecessarily create state just so an Effect can detect that a button was clicked. ### 5. Do Not Confuse preventDefault and stopPropagation ```jsx event.preventDefault(); ``` prevents a browser's default action. ```jsx event.stopPropagation(); ``` stops an event from continuing through parent [React](/courses/reactjs) handlers. They solve different problems. ### 6. Use onSubmit for Forms Prefer: ```jsx

``` instead of handling submission only through the submit button's click event. This preserves normal form behavior such as keyboard submission. ### 7. Keep Complex Handler Logic Readable For simple behavior: ```jsx ``` is easy to understand. For larger operations: ```jsx async function handlePublish() { // validate // submit // handle response } ``` is usually clearer than placing many lines inside JSX. ### 8. Pass Behavior Through Component Props When Appropriate Reusable UI components should often accept behavior from their parent: ```jsx function Button({ onClick, children }) { return ( ); } ``` The component remains reusable for Save, Delete, Publish, or other actions. ### Practical Mental Model ```text User interaction occurs ↓ React event handler runs ↓ Read event/arguments if needed ↓ Perform action or update state ``` ### Interview-Ready Answer Good React event handling means passing [functions](/javascript/functions-in-javascript) rather than executing them during rendering, using arrow functions when arguments are needed, handling forms through `onSubmit`, using semantic [HTML](/courses/html), and understanding the event object. `preventDefault()` stops default browser behavior, while `stopPropagation()` controls event propagation. User-triggered side effects generally belong directly in event handlers.