> ## Documentation Index
> Fetch the complete documentation index at: https://docs.anujpandey.in/llms.txt
> Use this file to discover all available pages before exploring further.

# Event Handling

# 📘 React Event Handling — Complete Theory Guide

***

## 1. 🧠 Introduction

### 🔹 What is Event Handling?

Event handling in React refers to the process of **capturing and responding to user interactions** such as:

* Clicks (`onClick`)
* Input changes (`onChange`)
* Form submissions (`onSubmit`)
* Keyboard events (`onKeyDown`)
* Mouse events (`onMouseEnter`, etc.)

It allows React applications to become **interactive and dynamic**.

***

### 🔹 Why is it Important in React?

Event handling is critical because:

* React apps are **UI-driven** → user interactions control behavior
* Enables **state updates → re-render → UI changes**
* Connects **user actions → business logic**
* Essential for:

  * Forms
  * Navigation
  * API calls
  * Animations

***

### 🔹 When and Why We Use It

We use event handling whenever:

* A user interacts with the UI
* We need to update state or trigger logic
* We want to:

  * Validate forms
  * Submit data
  * Toggle UI elements
  * Control components

***

## 2. ⚙️ Concepts / Internal Workings

***

### 🔹 2.1 Synthetic Events

React uses a wrapper called **SyntheticEvent** instead of native DOM events.

#### Why?

* Cross-browser compatibility
* Consistent behavior

```js theme={null}
function handleClick(event) {
  console.log(event); // SyntheticEvent
}
```

💡 Synthetic events normalize:

* `event.target`
* `event.preventDefault()`
* `event.stopPropagation()`

***

### 🔹 2.2 Event Delegation

React does **not attach events directly to DOM nodes**.

Instead:

* It attaches a **single listener at the root**
* Uses **event delegation**

#### Benefits:

* Better performance
* Fewer event listeners
* Efficient memory usage

***

### 🔹 2.3 Event Pooling (Important Concept)

Earlier React versions reused event objects (pooling).

⚠️ In modern React (17+):

* Event pooling is removed
* You can safely use events asynchronously

```js theme={null}
function handleClick(e) {
  setTimeout(() => {
    console.log(e.target); // Works fine in React 17+
  }, 1000);
}
```

***

### 🔹 2.4 Binding `this` (Class Components)

In class components, event handlers lose context.

```js theme={null}
class App extends React.Component {
  handleClick() {
    console.log(this); // undefined if not bound
  }
}
```

Solutions:

* Bind in constructor
* Use arrow functions

***

### 🔹 2.5 Relationship with State

Event handling is tightly coupled with state updates:

```js theme={null}
const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
}
```

👉 Flow:

```
User action → Event → Handler → setState → Re-render
```

***

### 🔹 2.6 Relationship with Re-rendering

* Every event handler can trigger a re-render
* React batches updates for performance

```js theme={null}
setCount(c => c + 1);
setCount(c => c + 1);
```

***

### 🔹 2.7 Prevent Default Behavior

```js theme={null}
function handleSubmit(e) {
  e.preventDefault();
}
```

Used for:

* Forms
* Links
* Native browser actions

***

## 3. 💻 Syntax & Examples

***

### 🔹 3.1 Basic Click Event

```jsx theme={null}
function App() {
  function handleClick() {
    console.log("Button clicked");
  }

  return <button onClick={handleClick}>Click Me</button>;
}
```

***

### 🔹 3.2 Inline Event Handler

```jsx theme={null}
<button onClick={() => console.log("Clicked!")}>
  Click
</button>
```

⚠️ Creates a new function every render

***

### 🔹 3.3 Passing Arguments

```jsx theme={null}
function handleClick(name) {
  console.log(name);
}

<button onClick={() => handleClick("John")}>
  Click
</button>
```

***

### 🔹 3.4 Event Object Usage

```jsx theme={null}
function handleClick(event) {
  console.log(event.target.innerText);
}

<button onClick={handleClick}>Click Me</button>
```

***

### 🔹 3.5 Input Handling

```jsx theme={null}
function App() {
  const [value, setValue] = useState("");

  function handleChange(e) {
    setValue(e.target.value);
  }

  return <input value={value} onChange={handleChange} />;
}
```

***

### 🔹 3.6 Form Submission

```jsx theme={null}
function App() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log("Form submitted");
  }

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

***

### 🔹 3.7 Keyboard Events

```jsx theme={null}
<input
  onKeyDown={(e) => {
    if (e.key === "Enter") {
      console.log("Enter pressed");
    }
  }}
/>
```

***

### 🔹 3.8 Conditional Handling

```jsx theme={null}
<button
  onClick={(e) => {
    if (e.shiftKey) {
      console.log("Shift + Click");
    }
  }}
>
  Click
</button>
```

***

### 🔹 3.9 Class Component Example

```jsx theme={null}
class App extends React.Component {
  handleClick = () => {
    console.log("Clicked");
  };

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}
```

***

## 4. ⚠️ Edge Cases / Common Mistakes

***

### ❌ 4.1 Calling Function Instead of Passing

```jsx theme={null}
<button onClick={handleClick()}>Click</button>
```

❌ Runs immediately
✅ Correct:

```jsx theme={null}
<button onClick={handleClick}>Click</button>
```

***

### ❌ 4.2 Forgetting `preventDefault`

```jsx theme={null}
<form onSubmit={handleSubmit}>
```

👉 Causes page reload if not handled

***

### ❌ 4.3 Losing `this` in Class Components

```jsx theme={null}
handleClick() {
  console.log(this); // undefined
}
```

Fix:

```jsx theme={null}
handleClick = () => {}
```

***

### ❌ 4.4 Overusing Inline Functions

```jsx theme={null}
<button onClick={() => doSomething()} />
```

Issue:

* New function every render
* Can hurt performance in large lists

***

### ❌ 4.5 Stale State in Handlers

```jsx theme={null}
setCount(count + 1);
```

Problem:

* Uses outdated value

Fix:

```jsx theme={null}
setCount(prev => prev + 1);
```

***

### ❌ 4.6 Event Propagation Issues

```jsx theme={null}
<div onClick={() => console.log("Parent")}>
  <button onClick={() => console.log("Child")} />
</div>
```

Fix:

```js theme={null}
e.stopPropagation();
```

***

### ❌ 4.7 Async Issues (Old React Knowledge)

Old:

```js theme={null}
event.target // null later
```

Modern React:
✅ Safe to use

***

## 5. ✅ Best Practices

***

### 🔹 5.1 Keep Handlers Clean & Small

Bad:

```js theme={null}
onClick={() => {
  // 50 lines of logic
}}
```

Good:

```js theme={null}
function handleClick() {}
```

***

### 🔹 5.2 Avoid Inline Functions in Large Lists

Use:

```jsx theme={null}
<button onClick={handleClick}>
```

Instead of:

```jsx theme={null}
<button onClick={() => handleClick()}>
```

***

### 🔹 5.3 Use Functional Updates for State

```js theme={null}
setCount(prev => prev + 1);
```

***

### 🔹 5.4 Use `useCallback` for Optimization

```js theme={null}
const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);
```

Useful when:

* Passing handlers to child components
* Avoiding unnecessary re-renders

***

### 🔹 5.5 Separate Logic from UI

```js theme={null}
function handleSubmit() {
  validate();
  sendData();
}
```

***

### 🔹 5.6 Prevent Unnecessary Re-renders

* Memoize handlers when needed
* Avoid recreating functions unnecessarily

***

### 🔹 5.7 Use Semantic Events Properly

* `onChange` for inputs
* `onSubmit` for forms
* `onClick` for buttons

***

### 🔹 5.8 Handle Errors Gracefully

```js theme={null}
try {
  // logic
} catch (error) {
  console.error(error);
}
```

***

## 🧩 Summary

Event handling in React is:

* Declarative (`onClick={...}`)
* Efficient (via event delegation)
* Cross-browser (via SyntheticEvents)
* Deeply integrated with:

  * State
  * Rendering
  * Component lifecycle

***

Below is a **senior-level, in-depth interview set** on **React Event Handling**. These are designed to probe **how you think**, not just what you know.

***

# 🧠 React Event Handling — Advanced Conceptual Questions

***

## 1. How does React’s event system differ from the native DOM event system?

### ✅ Strong Answer

React uses a **Synthetic Event system**, which is a wrapper around native DOM events.

#### Key Differences:

* **Delegation**:

  * React attaches a **single event listener at the root**
  * Native DOM attaches listeners directly to elements

* **Cross-browser normalization**:

  * Synthetic events ensure consistent behavior across browsers

* **Controlled lifecycle**:

  * React manages event flow in sync with its rendering model

#### Example:

```jsx theme={null}
<button onClick={handleClick}>Click</button>
```

Behind the scenes:

* React maps `onClick` → root listener → dispatches internally

***

### 🤔 Why this design?

* Performance (fewer listeners)
* Predictability across browsers
* Integration with React’s reconciliation

***

### ⚠️ Common Weak Answer

> "React events are same as DOM events but easier."

❌ Lacks understanding of delegation and abstraction layer.

***

## 2. Why did React remove event pooling in React 17?

### ✅ Strong Answer

Earlier, React reused event objects (pooling) to reduce memory allocations.

#### Problem:

* Async usage broke:

```js theme={null}
function handleClick(e) {
  setTimeout(() => console.log(e.target), 1000); // null (old React)
}
```

#### Solution:

* React 17 removed pooling → events persist naturally

***

### 🤔 Trade-off

* Slight increase in memory usage
* Much better developer experience and fewer bugs

***

### ⚠️ Weak Answer

> "Because it caused bugs."

❌ Doesn’t explain *what bugs* or trade-offs.

***

## 3. Explain how event delegation improves performance in React.

### ✅ Strong Answer

Instead of attaching event listeners to each DOM node:

* React attaches **one listener per event type at root**
* Uses bubbling to detect target

#### Benefits:

* Reduced memory footprint
* Faster mounting/unmounting
* Better scalability in large lists

***

### 🤔 Real-world scenario

Rendering 10,000 items:

* Native: 10,000 listeners
* React: 1 listener

***

### ⚠️ Trade-off

* Slight complexity in event dispatching logic

***

## 4. How does React handle event propagation differently from the DOM?

### ✅ Strong Answer

React mimics DOM propagation but controls it internally.

#### Phases:

* Capturing
* Bubbling (default in React)

#### Example:

```jsx theme={null}
<div onClick={() => console.log("Parent")}>
  <button onClick={(e) => {
    e.stopPropagation();
    console.log("Child");
  }} />
</div>
```

***

### Key Insight:

* React propagation happens within its virtual event system
* Still maps to native propagation under the hood

***

### ⚠️ Edge Case

Mixing React + native listeners can break expectations.

***

## 5. What happens if you mix native DOM events with React events?

### ✅ Strong Answer

This creates **two parallel event systems**:

* React synthetic system
* Native DOM system

#### Problem:

* `stopPropagation()` in React may NOT stop native listeners

***

### Example:

```js theme={null}
document.addEventListener("click", () => console.log("Native"));

<button onClick={(e) => {
  e.stopPropagation();
  console.log("React");
}} />
```

👉 Both may fire depending on order

***

### 🤔 Recommendation

* Avoid mixing unless necessary
* If needed → understand execution order

***

## 6. Why are inline event handlers considered problematic in certain scenarios?

### ✅ Strong Answer

```jsx theme={null}
<button onClick={() => handleClick()} />
```

#### Issues:

* New function created on every render
* Breaks referential equality
* Causes unnecessary re-renders in child components

***

### Example Problem:

```jsx theme={null}
<Child onClick={() => handleClick()} />
```

Even with `React.memo`, child re-renders

***

### Better:

```js theme={null}
const handleClick = useCallback(() => {}, []);
```

***

### ⚠️ Trade-off

* Premature optimization vs readability

***

## 7. How do event handlers interact with React’s batching system?

### ✅ Strong Answer

React batches state updates inside event handlers.

```js theme={null}
setCount(c => c + 1);
setCount(c => c + 1);
```

👉 Single re-render

***

### Why?

* Improves performance
* Avoids unnecessary intermediate renders

***

### Advanced Insight:

* In React 18 → batching works even in async contexts

***

## 8. What is the risk of stale closures in event handlers?

### ✅ Strong Answer

Event handlers can capture outdated state values.

```js theme={null}
setCount(count + 1); // may use stale value
```

***

### Fix:

```js theme={null}
setCount(prev => prev + 1);
```

***

### Real-world issue:

* Rapid clicks
* Async events
* Debounced handlers

***

## 9. How does React ensure consistency between UI and event handling?

### ✅ Strong Answer

React uses:

* Virtual DOM
* Controlled updates
* Synthetic events tied to render cycle

***

### Insight:

* Events trigger state updates
* State drives UI → ensures consistency

***

### Why important?

Prevents:

* UI desync bugs
* Race conditions

***

## 10. When should you use `useCallback` for event handlers?

### ✅ Strong Answer

Use when:

* Passing handler to child components
* Child uses `React.memo`
* Preventing unnecessary re-renders

***

### Example:

```js theme={null}
const handleClick = useCallback(() => {
  doSomething();
}, []);
```

***

### Trade-off:

* Overuse increases complexity
* Not always needed

***

## 11. Explain controlled vs uncontrolled inputs in event handling.

### ✅ Strong Answer

#### Controlled:

```jsx theme={null}
<input value={value} onChange={handleChange} />
```

* React controls state

#### Uncontrolled:

```jsx theme={null}
<input ref={inputRef} />
```

* DOM controls state

***

### Trade-offs:

| Controlled        | Uncontrolled       |
| ----------------- | ------------------ |
| Predictable       | Less boilerplate   |
| Easier validation | Better performance |

***

## 12. Why is `preventDefault()` critical in form handling?

### ✅ Strong Answer

Prevents browser’s default behavior (page reload).

```js theme={null}
e.preventDefault();
```

***

### Without it:

* SPA breaks
* Page refresh occurs

***

## 13. How do you handle expensive logic inside event handlers?

### ✅ Strong Answer

Strategies:

* Debouncing
* Throttling
* Moving logic outside render
* Using `useCallback`

***

### Example:

```js theme={null}
const debounced = useMemo(() => debounce(handle, 300), []);
```

***

## 14. What are the implications of event handling in large lists?

### ✅ Strong Answer

Challenges:

* Performance
* Re-renders
* Memory usage

***

### Solutions:

* Event delegation (React already does this)
* Memoization
* Avoid inline handlers

***

## 15. How does React handle events in concurrent rendering?

### ✅ Strong Answer

React prioritizes updates:

* User interactions = high priority
* Background updates = low priority

***

### Insight:

* Ensures responsive UI
* Event handlers remain synchronous triggers

***

## 16. Why should event handlers be pure (or close to pure)?

### ✅ Strong Answer

Avoid:

* Side effects during render
* Unpredictable behavior

***

### Good:

```js theme={null}
function handleClick() {
  setCount(c => c + 1);
}
```

***

### Bad:

```js theme={null}
function handleClick() {
  document.querySelector(...); // breaks React model
}
```

***

## 17. How do you debug event-related bugs in React?

### ✅ Strong Answer

Approach:

* Log event object
* Check propagation
* Verify handler binding
* Inspect state updates

***

### Tools:

* React DevTools
* Console tracing

***

## 18. What are common pitfalls with event propagation in nested components?

### ✅ Strong Answer

Issues:

* Unexpected bubbling
* Multiple handlers firing

***

### Fix:

```js theme={null}
e.stopPropagation();
```

***

### Real-world example:

* Modal inside overlay
* Dropdown inside menu

***

## 🎯 Final Takeaway

A senior engineer understands that event handling in React is:

* Not just syntax (`onClick`)
* But a system involving:

  * Delegation
  * Synthetic abstraction
  * State lifecycle
  * Performance trade-offs

***

Below is a **senior-level MCQ set (18 questions)** on **React Event Handling**, designed to test **deep understanding, internal behavior, and real-world pitfalls**.

***

# 🧠 React Event Handling — Advanced MCQs

***

## **1. What will be logged?**

```jsx theme={null}
function App() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
    console.log(count);
  }

  return <button onClick={handleClick}>Click</button>;
}
```

### Options:

A. 0
B. 1
C. 2
D. Undefined

### ✅ Correct Answer: **A**

### 💡 Explanation:

* `count` inside handler is **stale (closure)** → still `0`
* React batches updates → both updates use same `count`

***

### ❌ Why others are wrong:

* B/C: assume synchronous updates (incorrect in React)
* D: `count` is defined

***

## **2. Which behavior occurs when mixing native and React events?**

```js theme={null}
document.addEventListener("click", () => console.log("Native"));
```

```jsx theme={null}
<button onClick={(e) => {
  e.stopPropagation();
  console.log("React");
}} />
```

### Options:

A. Only "React" logs
B. Only "Native" logs
C. Both may log
D. None logs

### ✅ Correct Answer: **C**

### 💡 Explanation:

* React uses synthetic system
* Native listeners are separate
* `stopPropagation()` may not stop native handler

***

### ❌ Why others are wrong:

* A: ignores native system
* B: React handler will fire
* D: incorrect

***

## **3. What is the main reason React uses event delegation?**

### Options:

A. To simplify syntax
B. To reduce memory usage
C. To avoid re-renders
D. To eliminate bubbling

### ✅ Correct Answer: **B**

### 💡 Explanation:

* One listener at root instead of many
* Improves scalability

***

### ❌ Why others are wrong:

* A: syntax unrelated
* C: delegation doesn’t affect re-renders directly
* D: bubbling still exists

***

## **4. What happens here?**

```jsx theme={null}
<button onClick={handleClick()}>Click</button>
```

### Options:

A. Runs on click
B. Runs on render
C. Throws error always
D. Runs twice

### ✅ Correct Answer: **B**

### 💡 Explanation:

* Function is invoked immediately during render

***

### ❌ Why others are wrong:

* A: incorrect timing
* C: not necessarily an error
* D: not guaranteed

***

## **5. Which is the best fix for stale state updates?**

### Options:

A. `setCount(count + 1)`
B. `setCount(prev => prev + 1)`
C. `setTimeout(() => setCount(count + 1))`
D. `count++`

### ✅ Correct Answer: **B**

### 💡 Explanation:

* Functional updates ensure latest state

***

### ❌ Why others are wrong:

* A: stale closure risk
* C: still stale
* D: mutates state (wrong)

***

## **6. Why can inline handlers cause performance issues?**

```jsx theme={null}
<button onClick={() => doSomething()} />
```

### Options:

A. They block rendering
B. They create new function references
C. They prevent batching
D. They disable delegation

### ✅ Correct Answer: **B**

### 💡 Explanation:

* New function every render → breaks memoization

***

### ❌ Why others are wrong:

* A: no blocking
* C: batching unaffected
* D: delegation unaffected

***

## **7. What does React 17 change about events?**

### Options:

A. Removes event delegation
B. Removes event pooling
C. Disables bubbling
D. Makes events async

### ✅ Correct Answer: **B**

***

### 💡 Explanation:

* Events no longer reused → safer async usage

***

### ❌ Why others are wrong:

* A: delegation still exists
* C: bubbling still exists
* D: events are still sync triggers

***

## **8. What happens in this scenario?**

```jsx theme={null}
<div onClick={() => console.log("Parent")}>
  <button onClick={() => console.log("Child")} />
</div>
```

### Options:

A. Only Parent logs
B. Only Child logs
C. Child then Parent logs
D. Parent then Child logs

### ✅ Correct Answer: **C**

***

### 💡 Explanation:

* Event bubbles upward

***

### ❌ Why others are wrong:

* A/B: ignore propagation
* D: wrong order

***

## **9. When should `useCallback` be used for handlers?**

### Options:

A. Always
B. Never
C. When passing to memoized children
D. Only for API calls

### ✅ Correct Answer: **C**

***

### 💡 Explanation:

* Prevents unnecessary re-renders

***

### ❌ Why others are wrong:

* A: overkill
* B: ignores optimization
* D: unrelated

***

## **10. What does `preventDefault()` do?**

### Options:

A. Stops bubbling
B. Stops default browser behavior
C. Stops React rendering
D. Stops event creation

### ✅ Correct Answer: **B**

***

### ❌ Why others are wrong:

* A: that’s `stopPropagation`
* C/D: incorrect

***

## **11. Why might this fail?**

```js theme={null}
setTimeout(() => console.log(e.target), 1000);
```

### Options:

A. Because of async React rendering
B. Because of event pooling (old React)
C. Because of delegation
D. Because of batching

### ✅ Correct Answer: **B**

***

### 💡 Explanation:

* Old React reused events → nullified later

***

## **12. What is true about React event propagation?**

### Options:

A. React disables bubbling
B. React only supports capturing
C. React mimics DOM propagation
D. React events don’t propagate

### ✅ Correct Answer: **C**

***

## **13. Which scenario causes unnecessary re-renders?**

### Options:

A. Stable handler reference
B. Inline handler in list items
C. Using `useCallback`
D. Event delegation

### ✅ Correct Answer: **B**

***

## **14. What is the effect of this code?**

```jsx theme={null}
<button onClick={(e) => e.stopPropagation()} />
```

### Options:

A. Stops default behavior
B. Stops bubbling
C. Stops capturing
D. Stops rendering

### ✅ Correct Answer: **B**

***

## **15. Why is directly manipulating DOM inside handlers discouraged?**

### Options:

A. It crashes React
B. It breaks React’s declarative model
C. It disables events
D. It stops re-render

### ✅ Correct Answer: **B**

***

### 💡 Explanation:

* React expects UI to be derived from state

***

## **16. What happens with multiple state updates in one handler?**

### Options:

A. Multiple renders
B. Single batched render
C. No render
D. Random behavior

### ✅ Correct Answer: **B**

***

## **17. What is the main benefit of Synthetic Events?**

### Options:

A. Faster rendering
B. Cross-browser consistency
C. Smaller bundle size
D. No propagation

### ✅ Correct Answer: **B**

***

## **18. Which is the safest way to pass arguments to handlers?**

### Options:

A. `onClick={handleClick(arg)}`
B. `onClick={() => handleClick(arg)}`
C. `onClick={handleClick.bind(arg)}`
D. `onClick={arg}`

### ✅ Correct Answer: **B**

***

### 💡 Explanation:

* Ensures function runs only on click

***

### ❌ Why others are wrong:

* A: executes immediately
* C: incorrect binding usage
* D: invalid

***

# 🎯 Final Insight

These questions test whether you understand:

* Internal event system (Synthetic + delegation)
* Rendering & state interactions
* Performance implications
* Real-world debugging scenarios

***

Below is a **senior-level set of 18 React Event Handling coding problems** designed to simulate **real-world engineering scenarios**.
Each problem focuses on **decision-making, edge cases, and internal behavior**, not boilerplate.

***

# 🧠 React Event Handling — Coding Problems (Senior Level)

***

## **1. Debounced Search Input (Medium)**

### 🧩 Problem

Build a search input that:

* Calls an API **only after user stops typing for 500ms**
* Cancels previous pending calls

***

### ⚙️ Constraints

* No unnecessary API calls
* Must handle rapid typing

***

### ✅ Expected Behavior

Typing: `r → re → rea`
→ Only **one API call for "rea"**

***

### ⚠️ Edge Cases

* Fast typing
* Component unmount during debounce

***

### 💡 Solution

Use `setTimeout` + cleanup OR debounce utility.

```jsx theme={null}
useEffect(() => {
  const id = setTimeout(() => {
    fetchResults(query);
  }, 500);

  return () => clearTimeout(id);
}, [query]);
```

***

### 🧠 Key Insight

Event (`onChange`) triggers state → debounced effect handles logic.

***

## **2. Prevent Double Submission (Medium)**

### 🧩 Problem

Prevent a form from being submitted multiple times on rapid clicks.

***

### ⚙️ Constraints

* Disable button during submission
* Re-enable on response

***

### ✅ Expected Behavior

Clicking multiple times → only one API call

***

### 💡 Solution

```jsx theme={null}
const [loading, setLoading] = useState(false);

async function handleSubmit(e) {
  e.preventDefault();
  if (loading) return;

  setLoading(true);
  await submit();
  setLoading(false);
}
```

***

### 🧠 Insight

Event handler must guard against **re-entrancy**

***

## **3. Click Outside to Close Modal (Medium)**

### 🧩 Problem

Close modal when user clicks outside it.

***

### ⚙️ Constraints

* Must not close when clicking inside

***

### 💡 Solution

```jsx theme={null}
useEffect(() => {
  function handleClick(e) {
    if (!ref.current.contains(e.target)) {
      closeModal();
    }
  }

  document.addEventListener("click", handleClick);
  return () => document.removeEventListener("click", handleClick);
}, []);
```

***

### ⚠️ Edge Cases

* Event propagation issues
* Modal inside portals

***

## **4. Stop Event Propagation in Nested Menus (Medium)**

### 🧩 Problem

Dropdown inside a clickable parent — prevent parent click.

***

### 💡 Solution

```jsx theme={null}
<button onClick={(e) => {
  e.stopPropagation();
  openDropdown();
}} />
```

***

### 🧠 Insight

Understand **bubbling vs control**

***

## **5. Throttled Scroll Handler (Hard)**

### 🧩 Problem

Track scroll position without performance issues.

***

### ⚙️ Constraints

* Fire at most once every 200ms

***

### 💡 Solution

```js theme={null}
const throttled = useMemo(() => throttle(handleScroll, 200), []);
```

***

### ⚠️ Edge Cases

* Cleanup on unmount
* Passive listeners

***

## **6. Keyboard Navigation System (Hard)**

### 🧩 Problem

Navigate a list using arrow keys.

***

### 💡 Solution

```jsx theme={null}
function handleKeyDown(e) {
  if (e.key === "ArrowDown") setIndex(i => i + 1);
}
```

***

### ⚠️ Edge Cases

* Bounds handling
* Accessibility

***

## **7. Drag-to-Select Grid (Hard)**

### 🧩 Problem

Click + drag to select items in a grid.

***

### 💡 Solution

Use:

* `onMouseDown`
* `onMouseEnter`
* `onMouseUp`

Track selection state.

***

### 🧠 Insight

Combine multiple event types into one interaction

***

## **8. Prevent Stale State in Rapid Clicks (Medium)**

### 🧩 Problem

Fix counter increment bug on rapid clicks.

***

### 💡 Solution

```js theme={null}
setCount(prev => prev + 1);
```

***

### 🧠 Insight

Closure vs latest state

***

## **9. Input with Validation on Blur (Medium)**

### 🧩 Problem

Validate only when user leaves input.

***

### 💡 Solution

```jsx theme={null}
<input onBlur={validate} />
```

***

### ⚠️ Edge Cases

* User never blurs
* Accessibility concerns

***

## **10. Global Shortcut Handler (Hard)**

### 🧩 Problem

Press `Ctrl + K` to open search.

***

### 💡 Solution

```js theme={null}
useEffect(() => {
  function handleKey(e) {
    if (e.ctrlKey && e.key === "k") openSearch();
  }

  window.addEventListener("keydown", handleKey);
  return () => window.removeEventListener("keydown", handleKey);
}, []);
```

***

### ⚠️ Edge Cases

* Focused inputs
* OS differences

***

## **11. Infinite Scroll Loader (Hard)**

### 🧩 Problem

Load more items when reaching bottom.

***

### 💡 Solution

Use scroll event + threshold check.

***

### 🧠 Insight

Avoid excessive calls → throttle/debounce

***

## **12. Controlled vs Uncontrolled Form Switch (Hard)**

### 🧩 Problem

Switch between controlled and uncontrolled input dynamically.

***

### ⚠️ Edge Case

React warns about switching modes

***

### 💡 Solution

Always keep consistent control

***

## **13. Event Handler Memory Leak (Hard)**

### 🧩 Problem

Fix memory leak caused by event listeners.

***

### 💡 Solution

```js theme={null}
useEffect(() => {
  window.addEventListener("resize", handler);
  return () => window.removeEventListener("resize", handler);
}, []);
```

***

## **14. Optimized List Item Click Handlers (Hard)**

### 🧩 Problem

Large list → avoid re-rendering all items.

***

### 💡 Solution

* Use `useCallback`
* Pass stable handlers

***

## **15. Double Click vs Single Click Conflict (Hard)**

### 🧩 Problem

Handle both click and double click differently.

***

### 💡 Solution

Use timer to differentiate.

***

### ⚠️ Edge Case

Timing conflicts

***

## **16. Form Autosave on Input Change (Hard)**

### 🧩 Problem

Auto-save after user stops typing.

***

### 💡 Solution

Debounce inside `onChange`

***

## **17. Prevent Scroll Jump on Re-render (Hard)**

### 🧩 Problem

List re-renders → scroll resets

***

### 💡 Solution

Store scroll position before update

***

## **18. Nested Drag + Click Conflict (Hard)**

### 🧩 Problem

Dragging triggers click unintentionally

***

### 💡 Solution

Track drag state

```js theme={null}
if (isDragging) return;
```

***

## 🎯 Final Takeaways

These problems test:

* Event lifecycle understanding
* State + event coordination
* Performance optimization
* Real-world UX handling
* Edge-case awareness

***

Below is a **senior-level set of 18 debugging challenges** focused on **React Event Handling**.
These simulate **real production bugs**—subtle, non-obvious, and rooted in how React actually works.

***

# 🧠 React Event Handling — Debugging Challenges

***

## **1. Stale State in Rapid Clicks**

### 🐛 Buggy Code

```jsx theme={null}
function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
  }

  return <button onClick={handleClick}>{count}</button>;
}
```

***

### ❌ What’s Wrong

Count increases by **1 instead of 2**

***

### 🤔 Why It Happens

* Both updates use **same stale closure value**
* React batches updates

***

### ✅ Fix

```js theme={null}
setCount(prev => prev + 1);
setCount(prev => prev + 1);
```

***

### 🧠 Best Practice

Always use **functional updates** when next state depends on previous.

***

## **2. Immediate Function Execution**

### 🐛 Buggy Code

```jsx theme={null}
<button onClick={handleClick()}>Click</button>
```

***

### ❌ What’s Wrong

Function executes during render, not on click

***

### 🤔 Why

JS evaluates function immediately

***

### ✅ Fix

```jsx theme={null}
<button onClick={handleClick}>Click</button>
```

***

### 🧠 Best Practice

Pass **reference**, not invocation

***

## **3. Event Listener Memory Leak**

### 🐛 Buggy Code

```js theme={null}
useEffect(() => {
  window.addEventListener("resize", handleResize);
}, []);
```

***

### ❌ What’s Wrong

Listener never removed → memory leak

***

### 🤔 Why

Component unmount doesn’t clean up

***

### ✅ Fix

```js theme={null}
useEffect(() => {
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);
```

***

### 🧠 Best Practice

Always clean up side effects

***

## **4. Click Outside Not Working Properly**

### 🐛 Buggy Code

```js theme={null}
if (ref.current === e.target) {
  close();
}
```

***

### ❌ What’s Wrong

Fails when clicking child elements

***

### 🤔 Why

`target` ≠ container

***

### ✅ Fix

```js theme={null}
if (!ref.current.contains(e.target)) {
  close();
}
```

***

### 🧠 Best Practice

Use `contains()` for DOM hierarchy checks

***

## **5. stopPropagation Not Working**

### 🐛 Buggy Code

```js theme={null}
document.addEventListener("click", handler);

<button onClick={(e) => e.stopPropagation()} />
```

***

### ❌ What’s Wrong

Parent still triggers

***

### 🤔 Why

React and native events are separate systems

***

### ✅ Fix

Avoid mixing systems OR handle at same layer

***

### 🧠 Best Practice

Stick to React event system unless necessary

***

## **6. Inline Handler Causing Re-renders**

### 🐛 Buggy Code

```jsx theme={null}
<Child onClick={() => handleClick()} />
```

***

### ❌ What’s Wrong

Child re-renders unnecessarily

***

### 🤔 Why

New function every render

***

### ✅ Fix

```js theme={null}
const handleClick = useCallback(() => {}, []);
```

***

### 🧠 Best Practice

Stabilize handler references when needed

***

## **7. Debounce Not Working Correctly**

### 🐛 Buggy Code

```js theme={null}
const handleChange = debounce((e) => {
  setValue(e.target.value);
}, 300);
```

***

### ❌ What’s Wrong

Event becomes invalid

***

### 🤔 Why

Synthetic event reused (older React)

***

### ✅ Fix

```js theme={null}
const handleChange = (e) => {
  const value = e.target.value;
  debounce(() => setValue(value), 300);
};
```

***

### 🧠 Best Practice

Extract values before async usage

***

## **8. Form Reloading Page**

### 🐛 Buggy Code

```jsx theme={null}
<form onSubmit={handleSubmit}>
```

***

### ❌ What’s Wrong

Page refresh occurs

***

### 🤔 Why

Default browser behavior

***

### ✅ Fix

```js theme={null}
e.preventDefault();
```

***

### 🧠 Best Practice

Always handle form defaults in SPA

***

## **9. Drag Triggering Click**

### 🐛 Buggy Code

```js theme={null}
onClick={handleClick}
onMouseMove={handleDrag}
```

***

### ❌ What’s Wrong

Click fires after drag

***

### 🤔 Why

Mouseup triggers click

***

### ✅ Fix

```js theme={null}
if (isDragging) return;
```

***

### 🧠 Best Practice

Track interaction state explicitly

***

## **10. Multiple API Calls on Input**

### 🐛 Buggy Code

```js theme={null}
onChange={(e) => fetch(e.target.value)}
```

***

### ❌ What’s Wrong

API spam

***

### 🤔 Why

Fires on every keystroke

***

### ✅ Fix

Debounce input

***

### 🧠 Best Practice

Throttle or debounce expensive handlers

***

## **11. Incorrect useEffect Dependency**

### 🐛 Buggy Code

```js theme={null}
useEffect(() => {
  window.addEventListener("click", handleClick);
}, [handleClick]);
```

***

### ❌ What’s Wrong

Listener added repeatedly

***

### 🤔 Why

`handleClick` changes every render

***

### ✅ Fix

```js theme={null}
const handleClick = useCallback(() => {}, []);
```

***

### 🧠 Best Practice

Stabilize dependencies

***

## **12. Keyboard Event Not Triggering**

### 🐛 Buggy Code

```jsx theme={null}
<div onKeyDown={handleKey} />
```

***

### ❌ What’s Wrong

Event not firing

***

### 🤔 Why

Div not focusable

***

### ✅ Fix

```jsx theme={null}
<div tabIndex={0} onKeyDown={handleKey} />
```

***

### 🧠 Best Practice

Ensure element is focusable

***

## **13. PreventDefault Misuse**

### 🐛 Buggy Code

```js theme={null}
onClick={(e) => {
  e.preventDefault();
}}
```

***

### ❌ What’s Wrong

Unnecessary call

***

### 🤔 Why

No default behavior for button

***

### ✅ Fix

Remove it

***

### 🧠 Best Practice

Use only when needed

***

## **14. Event Handler Blocking UI**

### 🐛 Buggy Code

```js theme={null}
onClick={() => {
  while(true) {}
}}
```

***

### ❌ What’s Wrong

UI freezes

***

### 🤔 Why

Main thread blocked

***

### ✅ Fix

Move heavy logic to async/task

***

### 🧠 Best Practice

Keep handlers lightweight

***

## **15. Incorrect Ref Usage in Events**

### 🐛 Buggy Code

```js theme={null}
if (ref === e.target)
```

***

### ❌ What’s Wrong

Always false

***

### 🤔 Why

Ref object ≠ DOM node

***

### ✅ Fix

```js theme={null}
if (ref.current === e.target)
```

***

### 🧠 Best Practice

Use `.current`

***

## **16. Double Click Conflict**

### 🐛 Buggy Code

```jsx theme={null}
onClick={handleClick}
onDoubleClick={handleDouble}
```

***

### ❌ What’s Wrong

Single click fires before double

***

### 🤔 Why

Browser behavior

***

### ✅ Fix

Use delay logic

***

## **17. Scroll Listener Performance Issue**

### 🐛 Buggy Code

```js theme={null}
window.addEventListener("scroll", handleScroll);
```

***

### ❌ What’s Wrong

Too many executions

***

### 🤔 Why

Scroll fires frequently

***

### ✅ Fix

Throttle handler

***

### 🧠 Best Practice

Always optimize high-frequency events

***

## **18. Missing Cleanup in Custom Hook**

### 🐛 Buggy Code

```js theme={null}
function useClick() {
  useEffect(() => {
    window.addEventListener("click", handler);
  }, []);
}
```

***

### ❌ What’s Wrong

Leak across multiple mounts

***

### 🤔 Why

No cleanup

***

### ✅ Fix

Add cleanup function

***

### 🧠 Best Practice

Hooks must clean side effects

***

# 🎯 Final Insight

These bugs reflect real production issues involving:

* State + event timing
* Synthetic vs native behavior
* Performance traps
* Subtle lifecycle issues

***

Below is a **senior-level set of 18 production-grade machine coding problems** focused on **React Event Handling**.
These mirror **real-world systems** and **top tech interview expectations**.

***

# 🧠 React Event Handling — Machine Coding Problems (Architect Level)

***

## **1. Typeahead Search with Cancellation & Ranking**

### 🧩 Requirements

* Input field with live suggestions
* Debounced API calls (300–500ms)
* Cancel previous requests on new input
* Highlight matching substrings

***

### 🎯 UI Behavior

* Typing updates suggestions dynamically
* Loading indicator per query
* Keyboard navigation (↑ ↓ Enter)

***

### 🔄 State / Data Flow

* `query`, `results`, `loading`, `activeIndex`
* Event → state → async fetch → render

***

### ⚠️ Edge Cases

* Rapid typing
* Empty input
* API race conditions

***

### ⚡ Performance

* Debounce input
* AbortController for cancellation

***

### 🏗️ Architecture

* `SearchInput`
* `SuggestionsList`
* Custom hook: `useDebouncedSearch`

***

### 🧠 Approach

1. Capture `onChange`
2. Debounce query
3. Cancel previous request
4. Update results safely

***

## **2. Multi-Level Dropdown with Keyboard & Click Handling**

### 🧩 Requirements

* Nested dropdown menus
* Open/close on hover + click
* Keyboard navigation support

***

### 🎯 UI Behavior

* Arrow keys navigate levels
* Escape closes all

***

### 🔄 State

* Active menu path
* Focus index

***

### ⚠️ Edge Cases

* Hover vs click conflicts
* Focus loss

***

### ⚡ Performance

* Avoid re-renders of all items

***

### 🏗️ Architecture

* Recursive menu components
* Context for shared state

***

### 🧠 Approach

* Combine `onMouseEnter`, `onClick`, `onKeyDown`
* Manage focus explicitly

***

## **3. Click Outside + Escape Modal System**

### 🧩 Requirements

* Modal closes on:

  * Outside click
  * Escape key

***

### 🎯 UI Behavior

* Focus trapped inside modal
* Background scroll disabled

***

### 🔄 State

* `isOpen`

***

### ⚠️ Edge Cases

* Nested modals
* Portals

***

### ⚡ Performance

* Attach listeners only when open

***

### 🏗️ Architecture

* Portal-based modal
* Hook: `useOutsideClick`

***

### 🧠 Approach

* Global listeners + ref containment check

***

## **4. Infinite Scroll Feed with Smart Prefetch**

### 🧩 Requirements

* Load more data when near bottom
* Prefetch next page early

***

### 🎯 UI Behavior

* Seamless loading
* Loader indicator

***

### 🔄 State

* `items`, `page`, `loading`

***

### ⚠️ Edge Cases

* Duplicate calls
* Scroll jump

***

### ⚡ Performance

* Throttle scroll handler
* IntersectionObserver preferred

***

### 🏗️ Architecture

* Feed component + observer hook

***

### 🧠 Approach

* Detect threshold → fetch → append

***

## **5. Drag-and-Drop Kanban Board**

### 🧩 Requirements

* Drag tasks across columns
* Persist order

***

### 🎯 UI Behavior

* Smooth drag feedback
* Drop indicators

***

### 🔄 State

* Board structure

***

### ⚠️ Edge Cases

* Drag cancel
* Fast movements

***

### ⚡ Performance

* Avoid full board re-render

***

### 🏗️ Architecture

* Controlled drag state
* Context for board

***

### 🧠 Approach

* Combine mouse + state tracking

***

## **6. Rich Text Editor Toolbar Events**

### 🧩 Requirements

* Bold, italic, link insertion
* Selection-based formatting

***

### 🎯 UI Behavior

* Toolbar reacts to selection

***

### 🔄 State

* Selection range

***

### ⚠️ Edge Cases

* Selection lost on click

***

### ⚡ Performance

* Avoid excessive DOM reads

***

### 🏗️ Architecture

* Editor + toolbar sync via context

***

### 🧠 Approach

* Capture selection before event fires

***

## **7. Spreadsheet-like Cell Editing System**

### 🧩 Requirements

* Click to edit cell
* Arrow key navigation

***

### 🎯 UI Behavior

* Enter/Tab moves focus

***

### 🔄 State

* Active cell

***

### ⚠️ Edge Cases

* Blur vs key conflicts

***

### ⚡ Performance

* Virtualize rows

***

### 🏗️ Architecture

* Grid + cell components

***

### 🧠 Approach

* Event-driven navigation system

***

## **8. Global Shortcut Manager**

### 🧩 Requirements

* Register shortcuts like `Ctrl+S`, `Ctrl+K`

***

### 🎯 UI Behavior

* Works app-wide

***

### 🔄 State

* Registered handlers

***

### ⚠️ Edge Cases

* Input focus conflicts

***

### ⚡ Performance

* Single global listener

***

### 🏗️ Architecture

* Context-based registry

***

### 🧠 Approach

* Normalize key events

***

## **9. Image Zoom + Pan Viewer**

### 🧩 Requirements

* Scroll to zoom
* Drag to pan

***

### 🎯 UI Behavior

* Smooth zoom/pan

***

### ⚠️ Edge Cases

* Boundary overflow

***

### ⚡ Performance

* Throttle wheel events

***

### 🏗️ Architecture

* Transform-based rendering

***

### 🧠 Approach

* Combine wheel + mouse events

***

## **10. Auto-Save Form with Conflict Resolution**

### 🧩 Requirements

* Save after inactivity
* Detect conflicts

***

### 🎯 UI Behavior

* Save indicator

***

### ⚠️ Edge Cases

* Rapid edits
* API delay

***

### ⚡ Performance

* Debounce input

***

### 🏗️ Architecture

* Hook for autosave

***

### 🧠 Approach

* Track dirty state + debounce

***

## **11. Virtualized List with Selection & Multi-Select**

### 🧩 Requirements

* Large list (10k+ items)
* Shift + click selection

***

### 🎯 UI Behavior

* Smooth scrolling

***

### ⚠️ Edge Cases

* Selection persistence

***

### ⚡ Performance

* Virtualization mandatory

***

### 🏗️ Architecture

* Windowing library + state manager

***

### 🧠 Approach

* Track selection range

***

## **12. Resizable Panels (Split View)**

### 🧩 Requirements

* Drag divider to resize panels

***

### 🎯 UI Behavior

* Smooth resizing

***

### ⚠️ Edge Cases

* Min/max width

***

### ⚡ Performance

* Use requestAnimationFrame

***

### 🏗️ Architecture

* Layout container + drag handler

***

### 🧠 Approach

* Track mouse movement globally

***

## **13. Gesture-Based Mobile Carousel**

### 🧩 Requirements

* Swipe left/right
* Momentum scrolling

***

### ⚠️ Edge Cases

* Touch cancel

***

### ⚡ Performance

* Passive listeners

***

### 🏗️ Architecture

* Touch event abstraction

***

### 🧠 Approach

* Track touch delta + velocity

***

## **14. Collaborative Cursor Tracker (Realtime)**

### 🧩 Requirements

* Show multiple users’ cursors

***

### 🎯 UI Behavior

* Smooth cursor movement

***

### ⚠️ Edge Cases

* Network lag

***

### ⚡ Performance

* Throttle mouse move events

***

### 🏗️ Architecture

* WebSocket + event throttling

***

### 🧠 Approach

* Emit + render positions efficiently

***

## **15. Nested Drag-and-Drop Tree**

### 🧩 Requirements

* Drag items within tree structure

***

### ⚠️ Edge Cases

* Invalid drops

***

### ⚡ Performance

* Avoid re-rendering entire tree

***

### 🏗️ Architecture

* Recursive components

***

### 🧠 Approach

* Track drag path + drop target

***

## **16. Inline Editable Table with Validation**

### 🧩 Requirements

* Click to edit
* Validate on blur

***

### ⚠️ Edge Cases

* Invalid input

***

### ⚡ Performance

* Isolate cell updates

***

### 🏗️ Architecture

* Controlled inputs per cell

***

### 🧠 Approach

* Separate edit vs display state

***

## **17. Notification System with Auto Dismiss + Pause on Hover**

### 🧩 Requirements

* Auto-dismiss after 5s
* Pause on hover

***

### ⚠️ Edge Cases

* Multiple notifications

***

### ⚡ Performance

* Efficient timers

***

### 🏗️ Architecture

* Notification manager

***

### 🧠 Approach

* Combine timers + hover events

***

## **18. Zoomable Timeline with Scroll Sync**

### 🧩 Requirements

* Scroll horizontally
* Zoom timeline

***

### ⚠️ Edge Cases

* Sync multiple tracks

***

### ⚡ Performance

* Throttle scroll + transform

***

### 🏗️ Architecture

* Shared scroll state

***

### 🧠 Approach

* Event coordination system

***

# 🎯 Final Insight

These problems test:

* Event orchestration (multiple event types)
* State synchronization
* Performance under heavy interaction
* Real-world UX constraints
* Architectural thinking

***

Below is a **FAANG-level interview set (18 questions)** on **React Event Handling**, designed to evaluate **deep understanding, system thinking, and real-world decision-making**.

***

# 🧠 React Event Handling — Senior Interview Questions

***

## **1. How would you design an event-heavy component (e.g., canvas editor or drag system) to avoid performance bottlenecks?**

### 🔍 Follow-ups

* How do you handle high-frequency events like `mousemove`?
* Where would you store transient vs persistent state?

***

### ✅ Strong Answer

* Use **throttling / requestAnimationFrame**
* Keep **transient state outside React (refs)** to avoid re-renders
* Use **event delegation/global listeners**
* Batch updates and minimize DOM writes

***

### ❌ Weak Answer

> “Use useState and optimize later”

❌ Ignores render cost and event frequency impact

***

## **2. Explain how React’s event delegation impacts debugging complex UI interactions.**

### 🔍 Follow-ups

* How would you debug propagation issues?
* What happens with portals?

***

### ✅ Strong Answer

* Events handled at root → not attached per node
* Debugging requires understanding synthetic propagation
* Portals still participate in React tree propagation

***

### ❌ Weak Answer

> “Events work like DOM events”

❌ Misses abstraction layer

***

## **3. You notice unnecessary re-renders in a list with click handlers. How do you diagnose and fix it?**

### 🔍 Follow-ups

* How do you confirm handler identity changes?
* When is `useCallback` justified?

***

### ✅ Strong Answer

* Check referential equality of handlers
* Inline functions cause re-renders
* Use `useCallback` selectively

***

### ❌ Weak Answer

> “Wrap everything in useCallback”

❌ Over-optimization without reasoning

***

## **4. How would you design a global keyboard shortcut system in a large app?**

### 🔍 Follow-ups

* How do you avoid conflicts?
* How do you scope shortcuts?

***

### ✅ Strong Answer

* Single global listener
* Context-based registration system
* Ignore events from inputs
* Normalize keys

***

### ❌ Weak Answer

> “Add event listener in each component”

❌ Leads to duplication and conflicts

***

## **5. Why can mixing native DOM events with React events cause bugs?**

### 🔍 Follow-ups

* How does `stopPropagation` behave?

***

### ✅ Strong Answer

* Two event systems run independently
* React’s stopPropagation may not affect native listeners

***

### ❌ Weak Answer

> “Because React is different”

❌ Lacks mechanism understanding

***

## **6. How do you handle stale state inside event handlers?**

### 🔍 Follow-ups

* When does this become critical?

***

### ✅ Strong Answer

* Use functional updates
* Understand closure capture

***

### ❌ Weak Answer

> “Just use latest state”

❌ Doesn’t explain how

***

## **7. Design a robust “click outside” detection system.**

### 🔍 Follow-ups

* How do you handle portals?
* What about nested components?

***

### ✅ Strong Answer

* Use `ref.contains(e.target)`
* Attach listener at document level
* Handle portal edge cases

***

### ❌ Weak Answer

> “Compare element directly”

❌ Fails for nested DOM

***

## **8. How would you optimize scroll or resize handlers in React?**

### 🔍 Follow-ups

* When to use passive listeners?

***

### ✅ Strong Answer

* Throttle/debounce
* Use passive listeners
* Avoid state updates per event

***

### ❌ Weak Answer

> “Use useEffect”

❌ Doesn’t address performance

***

## **9. What are the trade-offs of using inline event handlers?**

### 🔍 Follow-ups

* When are they acceptable?

***

### ✅ Strong Answer

* Simplicity vs referential instability
* Acceptable in small components

***

### ❌ Weak Answer

> “They are bad”

❌ Oversimplified

***

## **10. How do you prevent multiple rapid submissions in a form?**

### 🔍 Follow-ups

* How do you handle race conditions?

***

### ✅ Strong Answer

* Disable button
* Track loading state
* Prevent duplicate requests

***

### ❌ Weak Answer

> “Use debounce”

❌ Not sufficient for submissions

***

## **11. How does React batching affect event-driven state updates?**

### 🔍 Follow-ups

* What changed in React 18?

***

### ✅ Strong Answer

* Multiple updates → single render
* React 18 extends batching to async

***

### ❌ Weak Answer

> “It improves performance”

❌ Lacks mechanism detail

***

## **12. How would you debug an issue where an event handler fires twice?**

### 🔍 Follow-ups

* Could Strict Mode affect this?

***

### ✅ Strong Answer

* Check Strict Mode double-invocation
* Verify event listener duplication

***

### ❌ Weak Answer

> “Bug in React”

❌ No debugging approach

***

## **13. How do you manage event handling in large lists (10k items)?**

### 🔍 Follow-ups

* How does React help?

***

### ✅ Strong Answer

* Use event delegation
* Avoid inline handlers
* Virtualization

***

### ❌ Weak Answer

> “React handles it”

❌ Ignores scaling issues

***

## **14. How would you handle drag-and-drop interactions without performance issues?**

### 🔍 Follow-ups

* How do you avoid re-renders?

***

### ✅ Strong Answer

* Use refs for transient state
* Throttle updates
* Avoid state on every move

***

### ❌ Weak Answer

> “Update state on every mouse move”

❌ Causes jank

***

## **15. What are common pitfalls with event propagation in nested components?**

### 🔍 Follow-ups

* Real-world example?

***

### ✅ Strong Answer

* Unexpected bubbling
* Fix with stopPropagation carefully

***

### ❌ Weak Answer

> “Use stopPropagation everywhere”

❌ Leads to fragile code

***

## **16. How would you design an autosave feature triggered by user input?**

### 🔍 Follow-ups

* How do you avoid API spam?

***

### ✅ Strong Answer

* Debounce input
* Track dirty state
* Cancel previous requests

***

### ❌ Weak Answer

> “Call API on every change”

❌ Inefficient

***

## **17. Why should event handlers avoid heavy synchronous work?**

### 🔍 Follow-ups

* What happens to the UI thread?

***

### ✅ Strong Answer

* Blocks main thread
* Causes UI freeze
* Move work to async/task queue

***

### ❌ Weak Answer

> “Because it’s slow”

❌ No technical reasoning

***

## **18. How do you ensure accessibility in event-driven components?**

### 🔍 Follow-ups

* Keyboard support?

***

### ✅ Strong Answer

* Use semantic elements
* Support keyboard events
* Manage focus

***

### ❌ Weak Answer

> “Use ARIA”

❌ Too vague

***

# 🎯 Final Evaluation Criteria

A strong candidate demonstrates:

* Deep understanding of **event system internals**
* Ability to reason about **performance & scaling**
* Awareness of **real-world edge cases**
* Strong **debugging mindset**
* Thoughtful **trade-off decisions**

***