Feed Reader BotФотография
DEV Community: react
React Mastery Series – Day 9: Event Handling in React – Making Applications Interactive
Welcome back to the React Mastery Series!
In the previous article, we explored React Rendering and Component Lifecycle.
We learned:
* What causes a component to re-render
* How React reconciliation works
* The difference between rendering and DOM updates
* How lifecycle behavior is handled using Hooks
Now let's learn how React applications respond to user interactions.
Every modern application depends on events:
* Clicking buttons
* Typing into forms
* Selecting options
* Submitting data
* Dragging and dropping elements
* Keyboard shortcuts
React provides a powerful event system to handle all these interactions. What is Event Handling? Event handling is the process of responding to user actions in an application.
Examples: User Action
|
↓
Event Triggered
|
↓
Event Handler Executes
|
↓
State Updated
|
↓
UI Re-renders Example:
A user clicks the "Transfer Money" button: Click Button
|
↓
Handle Click Event
|
↓
Validate Data
|
↓
Call API
|
↓
Update UI Events in Traditional JavaScript vs React Traditional JavaScript const button = document.getElementById("save"); button.addEventListener( "click", saveData ); You manually:
* Find the DOM element
* Attach event listeners
* Manage updates React React attaches events directly inside JSX. button onClick={saveData}>
Save button> React manages the event registration internally. React Event Syntax React events use:
* camelCase naming
* JSX expressions
* Function references
HTML: onclick="save()">
Save React: button onClick={save}>
Save button> Notice: onclick ❌
onClick ✅ Handling Click Events Example: function Button() { function handleClick() { console.log("Button clicked"); } return ( button onClick={handleClick}>
Click Me button> ); } When the user clicks: Click
|
↓
handleClick()
|
↓
Execute Logic Passing Functions vs Calling Functions A very common beginner mistake. Incorrect button onClick={handleClick()}>
Save button> This executes immediately during rendering. Correct button onClick={handleClick}>
Save button> React calls the function only when the event occurs. Passing Arguments to Event Handlers Sometimes you need to pass additional information.
Example: function deleteUser(id) { console.log(id); } Incorrect: button onClick={deleteUser(10)}>
Delete button> Correct: button onClick={() => deleteUser(10)} >
Delete button> The arrow function delays execution until the click happens. The Event Object React automatically provides an event object.
Example: function handleClick(event) { console.log(event); } Usage: button onClick={handleClick}>
Click button> The event object contains information about:
* Target element
* Event type
* Mouse position
* Keyboard details
* Form information Synthetic Events in React React does not directly use browser events.
Instead, React provides a wrapper called SyntheticEvent
Example: function handleClick(event) { console.log(event.type); } Output: click Why does React use Synthetic Events?
Benefits:
✅ Cross-browser consistency
✅ Same API across browsers
✅ Better event management
✅ Performance optimizations
Your code behaves consistently across different environments. Common Mouse Events React supports many mouse events:
Event Purpose onClick Mouse click onDoubleClick Double click onMouseEnter Mouse enters element onMouseLeave Mouse leaves[...]