How Does Event Handling Work in React?
Understand React event handling: onClick and onChange props, SyntheticEvent, preventDefault, common mistakes, code examples and interview questions answered.
Expected Interview Answer
In React you handle events by passing a function to a camelCased prop like onClick or onChange directly on a JSX element, and React calls that function with a SyntheticEvent when the event fires.
React wraps native DOM events in a cross-browser SyntheticEvent that has the same interface everywhere. You pass a function reference, not a string and not the result of calling the function, so onClick={handleClick} rather than onClick={handleClick()}. React attaches a single delegated listener at the root and dispatches events to your handlers, which is efficient. To stop default browser behavior you call event.preventDefault(), and to stop bubbling you call event.stopPropagation().
- Consistent cross-browser behavior via SyntheticEvent
- Declarative handlers live right next to the markup
- Efficient event delegation handled automatically by React
- Easy access to event data and to preventDefault or stopPropagation
- Works naturally with component state updates
AI Mentor Explanation
Event handling is like a fielder assigned to react when the ball comes their way. onClick is the fielding position, your handler is the catch, and preventDefault is choosing not to let the ball run to the boundary the way it normally would if nobody intervened.
Step-by-Step Explanation
Step 1
Write a handler function
Define a function that does the work, for example logging or updating state.
Step 2
Attach it to a JSX prop
Pass the function reference to a camelCased event prop like onClick or onChange.
Step 3
Pass a reference, not a call
Use onClick={handleClick}, not onClick={handleClick()}, so it runs on the event, not on render.
Step 4
Read the event object
Your handler receives a SyntheticEvent; read event.target.value or event.key as needed.
Step 5
Control default and bubbling
Call event.preventDefault() to stop default behavior and event.stopPropagation() to stop bubbling.
What Interviewer Expects
- Knows events are camelCased props like onClick
- Passes a function reference rather than invoking it
- Understands SyntheticEvent and cross-browser consistency
- Can use preventDefault and stopPropagation correctly
- Knows how to pass arguments to a handler with an arrow function
Common Mistakes
- Writing onClick={handleClick()} which calls the function during render
- Using lowercase onclick instead of the React onClick prop
- Passing a string like onClick="handleClick" as in HTML
- Forgetting preventDefault on form submissions, causing a page reload
- Assuming the event is a raw DOM event rather than a SyntheticEvent
Best Answer (HR Friendly)
“In React you tell an element what to do when something happens by handing it a function, for example onClick. When the user clicks, React runs that function and gives it details about the event, so you can update the screen or stop the default browser action.”
Code Example
function SearchForm() {
const [query, setQuery] = useState('')
const handleSubmit = (event) => {
event.preventDefault()
console.log('Searching for', query)
}
return (
<form onSubmit={handleSubmit}>
<input
value={query}
onChange={(event) => setQuery(event.target.value)}
/>
<button type="submit">Search</button>
</form>
)
}Follow-up Questions
- What is a SyntheticEvent and why does React use one?
- How do you pass an extra argument to an event handler?
- What is the difference between preventDefault and stopPropagation?
- Does React attach a listener to every element with an event handler?
- How do you handle keyboard events in React?
MCQ Practice
1. How do you attach a click handler in React?
React uses camelCased props and expects a function reference, so onClick={handle} runs handle when clicked.
2. What object does a React event handler receive?
React passes a SyntheticEvent, a cross-browser wrapper around the native event with a consistent interface.
3. Which call stops a form from reloading the page on submit?
event.preventDefault() cancels the browser's default form submission so the page does not reload.
Flash Cards
How are event props named in React? — In camelCase, like onClick, onChange, and onSubmit.
Reference vs call? — Pass onClick={handle}, not onClick={handle()}, which would run during render.
What is a SyntheticEvent? — A cross-browser wrapper React gives handlers with a consistent event interface.
How do you stop a default action? — Call event.preventDefault() inside the handler.