By Abdelhamid Taleb on 1/8/2025

1. React's synthetic event system

React's synthetic event system offers a unique and efficient way to handle events in your applications. However, it comes with nuances that developers must understand to avoid common pitfalls, such as the infamous "TypeError: Cannot Read Properties of Null."

1.1 Understanding React's Synthetic Events

React uses a system called Synthetic Events to manage event handling. Instead of attaching individual event listeners to every DOM element, React employs a single, global event listener at the root of the application. This approach:

Improves performance by reducing the number of event listeners.
Ensures consistency by normalizing event behavior across browsers.

Here’s an example to illustrate how React handles events:

const handleClick = (e) => {
  console.log(e); // SyntheticBaseEvent
  console.log(e.nativeEvent); // Original DOM event
  console.log(e.target); // The actual DOM element

  e.stopPropagation();
  e.preventDefault();
};

function App() {
  return (
    <div onClick={() => console.log("Root clicked")}>  
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

In this example:

React uses a single event listener attached to the root element.
When you click the button, React identifies the target and invokes the appropriate handler.

1.2 React's Event Pooling

React pools and recycles synthetic events for performance optimization. This means the same event object is reused and reset after the handler completes. Accessing the event object in asynchronous code can lead to errors.

Attempting to access event properties after asynchronous operations may result in a "TypeError."

For example:

const handleClick = async (e) => {
  console.log(e.target); // Valid
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log(e.target); // Error: Cannot read properties of null
};

1.3 A Real-World Scenario

Consider a form submission handler:

const handleSubmit = async (e) => {
  e.preventDefault();

  const formData = Object.fromEntries(new FormData(e.target).entries());

  try {
    const response = await fetch("/api/send-email", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(formData),
    });

    if (!response.ok) throw new Error("Failed to send message.");

    e.target.reset(); // Reset the form
    console.log("Message sent successfully!");
  } catch (error) {
    console.error("Error:", error);
  }
};

This code may throw an error because React nullifies the event object after asynchronous operations.

1.4 Fixing the Issue

To fix this, capture the event properties synchronously:

const handleSubmit = async (e) => {
  e.preventDefault();

  const form = e.target; // Capture the form reference
  const formData = Object.fromEntries(new FormData(form).entries());

  try {
    const response = await fetch("/api/send-email", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(formData),
    });

    if (!response.ok) throw new Error("Failed to send message.");

    form.reset(); // Use the captured reference
    console.log("Message sent successfully!");
  } catch (error) {
    console.error("Error:", error);
  }
};

By capturing the form reference in a variable, you ensure it remains accessible throughout the handler.

1.5 Key Takeaways

Understand React's synthetic event system and its nuances.
Capture event properties synchronously before asynchronous operations.
Consider libraries like React Hook Form or Formik for complex forms.

By understanding React's event system, you can write more robust and error-free applications. 🚀