7) Event Handling in React

Event Handling
Event handling in React is a crucial aspect of building interactive web applications. React simplifies handling events in a cross-browser-compatible way and makes it straightforward to manage event-driven interactions in a component-based architecture. Here's an overview of how event handling works in React,
i) Event Binding in JSX
In React, you define event handlers as attributes in JSX (JavaScript XML) using camelCase syntax. For example, instead of onclick, you use onClick. Here’s a basic example

function MyButton() {
   function handleClick() {
     alert('Button was clicked!');
   }

   return (
     <button onClick={handleClick}>
       Click me
     </button>
   );
 }

In this example, the onClick attribute is assigned a function handleClick, which will be executed when the button is clicked.

ii) Passing Arguments to Event Handlers
Sometimes you need to pass additional parameters to your event handler functions. You can achieve this by using an arrow function or a function binding.

 function MyButton(props) {
   function handleClick(id) {
     alert(`Button ${id} was clicked!`);
   }

   return (
     <button onClick={() => handleClick(props.id)}>
       Click me
     </button>
   );
 }

Using bind,

 function MyButton(props) {
   function handleClick(id) {
     alert(`Button ${id} was clicked!`);
   }

   return (
     <button onClick={handleClick.bind(null, props.id)}>
       Click me
     </button>
   );
 }

iii) Synthetic Events
React implements a synthetic event system, which is a cross-browser wrapper around the browser's native event system. Synthetic events have the same interface as native events, which means you can use properties like event.target and methods like event.preventDefault().

 function MyForm() {
   function handleSubmit(event) {
     event.preventDefault();
     console.log('Form submitted');
   }

   return (
     <form onSubmit={handleSubmit}>
       <button type="submit">Submit</button>
     </form>
   );
 }

iv) Event Pooling
React reuses event objects to improve performance through a process called event pooling. This means that the event object properties are nullified after the event handler is called. If you need to access the event properties asynchronously, you should call event.persist()

 function MyComponent() {
   function handleClick(event) {
     event.persist();
     setTimeout(() => {
       console.log(event.type); // Works correctly because event is persisted
     }, 1000);
   }

   return (
     <button onClick={handleClick}>
       Click me
     </button>
   );
 }

Interview Questions
Basic Questions
i) What is event handling in React?
ii) How is event handling different in React vs plain JavaScript?
iii) Why does React use camelCase for events (e.g., onClick)?
iv) How do you attach an event handler in a functional component?
v) What happens when an event is triggered in React?
Synthetic Events (Very Important)
i) What are Synthetic Events in React?
ii) Why does React use Synthetic Events instead of native events?
iii) Are Synthetic Events cross-browser compatible?
iv) What is event pooling in React? Is it still used?
v) Can you access event properties asynchronously? Why/why not?
Event Handling Techniques
i) How do you pass parameters to an event handler?
ii) Difference between:
onClick={handleClick}
onClick={handleClick()}
onClick={() => handleClick()}
iii) How do you prevent default behavior in React?
iv) How do you stop event propagation?
Event Propagation (Critical)
i) What is event bubbling?
ii) What is event capturing?
iii) How does React handle event propagation?
iv) How do you stop propagation in React?
v) Difference between e.stopPropagation() and e.preventDefault()
Forms & Controlled Components
i) How does React handle form events?
ii) What is a controlled component?
iii) Difference between controlled and uncontrolled components?
iv) Why is onChange used instead of onInput in React?
v) How do you handle multiple inputs in a form?
Performance & Optimization
i) Why should we avoid inline functions in event handlers?
ii) How does useCallback help in event handling?
iii) When should you memoize event handlers?
iv) How does event delegation improve performance in React?
Real-World & Scenario-Based
i) How would you handle a button click that triggers an API call?
ii) How do you debounce or throttle input events?
iii) How do you handle keyboard events in React?
iv) How do you implement event delegation manually?
v) How would you handle a form submission with validation?
Advanced / Tricky Questions
i) What happens if you pass onClick={handleClick()} instead of a function reference?
ii) Why does React use a single event listener internally?
iii) How does React’s event system differ from the DOM event system?
iv) Can you mix native DOM events with React events?
v) What are the pitfalls?
vi) What are passive event listeners?
vii) Does React support them?
viii) How do events work in React portals?
Coding Questions (Very Common)
i) Create a button that logs a message on click Build a controlled input field Implement a form with onSubmit Stop propagation in nested elements Pass parameters to event handler without inline arrow functions Implement debounce on search input