React uses its own event system called SyntheticEvent. This system wraps browser-native events, providing a consistent interface across all browsers. By using SyntheticEvent, you avoid dealing with browser inconsistencies, which makes your code more reliable and easier to maintain. SyntheticEvent normalizes properties such as target, type, and currentTarget, so you can confidently use events without worrying about differences between browsers.

TypeScript enhances this system by enforcing type safety on event objects and event handlers. When you use TypeScript with React, you must specify the exact type of event you expect, such as React.MouseEvent or React.ChangeEvent<HTMLInputElement>. This helps prevent common bugs, such as accessing non-existent properties or using the wrong event type for a handler. TypeScript will alert you if you try to use event properties incorrectly, making your code safer and easier to refactor.

Extracting values from events is a frequent task in React components. For example, when working with form inputs, you often need to get the current value from an input field. With TypeScript, you can annotate your event handler to ensure you are accessing properties safely:

function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
  const value = event.target.value;
  // Use the value as needed
}

In this example, TypeScript knows that event.target is an HTMLInputElement, so you can safely access its value property.

Managing the lifecycle of a SyntheticEvent is also important. By default, React reuses SyntheticEvent objects for performance reasons. If you need to access the event asynchronously (for example, inside a setTimeout), you must call event.persist() to prevent React from clearing the event's properties:

function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
  event.persist();
  setTimeout(() => {
    console.log(event.type); // Safe to access after async delay
  }, 1000);
}

By combining React's SyntheticEvent system with TypeScript's type checking, you write event-driven code that is robust and less prone to subtle bugs.