Synthetic events in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a React synthetic event is reused asynchronously?

Consider this React code snippet where a synthetic event is accessed inside a setTimeout callback:

function Button() {
  function handleClick(event) {
    setTimeout(() => {
      alert(event.type);
    }, 1000);
  }
  return <button onClick={handleClick}>Click me</button>;
}

What will the alert show when the button is clicked?

React

function Button() {
  function handleClick(event) {
    setTimeout(() => {
      alert(event.type);
    }, 1000);
  }
  return <button onClick={handleClick}>Click me</button>;
}

A It alerts 'undefined' because the synthetic event is nullified.

B It throws a runtime error because event is undefined.

C It alerts 'click' as expected.

D It alerts 'button' because event.target is used instead of event.type.

💡 Hint

Remember that React synthetic events are pooled and reused for performance.

React reuses synthetic event objects for efficiency. After the event handler finishes, the event's properties are cleared. Accessing the event asynchronously (like inside setTimeout) will find the event properties nullified, so event.type becomes undefined.

📝 Syntax

intermediate

Which option correctly prevents default behavior in a React synthetic event?

Given a React event handler, which code correctly prevents the default action of the event?

React

function handleSubmit(event) {
  // prevent default here
}

A event.defaultPrevented = true;

B event.preventDefault();

C event.stopPropagation();

D return false;

💡 Hint

Think about the standard method to stop default browser actions in React events.

In React synthetic events, event.preventDefault() is the correct method to stop the default browser behavior. Setting event.defaultPrevented directly or returning false does not work as expected in React.

🔧 Debug

advanced

Why does this React synthetic event handler cause a TypeError?

Examine this React component code:

function Input() {
  function handleChange(event) {
    const value = event.target.value.toUpperCase();
    setInputValue(value);
  }
  const [inputValue, setInputValue] = React.useState('');
  return <input value={inputValue} onChange={handleChange} />;
}

Sometimes, this code throws TypeError: Cannot read property 'value' of null. Why?

React

function Input() {
  function handleChange(event) {
    const value = event.target.value.toUpperCase();
    setInputValue(value);
  }
  const [inputValue, setInputValue] = React.useState('');
  return <input value={inputValue} onChange={handleChange} />;
}

A Because the synthetic event is reused and event.target becomes null before accessing value.

B Because setInputValue is called before event.target.value is defined.

C Because the input element is uncontrolled and causes null target.

D Because toUpperCase() is called on a number instead of a string.

💡 Hint

Think about React's event pooling and when event properties are accessible.

React pools synthetic events for performance. If you access event properties asynchronously or after an async call, the event may be nullified. Here, if setInputValue triggers a re-render that delays access, event.target can be null. To fix, copy event.target.value to a variable before async calls.

🧠 Conceptual

advanced

How does React's synthetic event system improve performance?

React uses a synthetic event system instead of native browser events. Which explanation best describes how this improves performance?

A By attaching event listeners to every DOM node individually, React speeds up event handling.

B By converting all events to native DOM events, React avoids extra processing.

C By pooling event objects and reusing them, React reduces memory allocation and garbage collection overhead.

D By disabling event bubbling, React prevents unnecessary event propagation.

💡 Hint

Think about how reusing objects can save resources.

React creates synthetic event objects that it reuses (pools) for multiple events. This reduces the number of objects created and garbage collected, improving performance. React also attaches a single event listener at the root for delegation, not on every node.

❓ state_output

expert

What is the final state value after this React synthetic event handler runs?

Analyze this React component:

function Counter() {
  const [count, setCount] = React.useState(0);

  function handleClick(event) {
    event.persist();
    setTimeout(() => {
      setCount(count + 1);
      console.log(event.type);
    }, 1000);
  }

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

After clicking the button once, what will be the value of count shown on the button after 1 second?

React

function Counter() {
  const [count, setCount] = React.useState(0);

  function handleClick(event) {
    event.persist();
    setTimeout(() => {
      setCount(count + 1);
      console.log(event.type);
    }, 1000);
  }

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

A 0

B 2

C NaN

D 1

💡 Hint

Consider how closures capture state values in React hooks.

The count variable inside the setTimeout callback is the value when the handler was created (0). The setCount(count + 1) uses this stale value, so after 1 second, count updates to 1 and the component re-renders to show the updated count.