React Props, Synthetic Events and the Virtual DOM Explained
June 3, 2026
React Props, Synthetic Events and the Virtual DOM Explained
Introduction
A React application becomes useful when users can interact with it. Buttons must respond to clicks, forms must capture input, and components must communicate with one another.
React provides a consistent model for handling these interactions through props, events, and rendering.
In this article, we'll explore how components communicate, how React handles browser events, and what happens when user interactions trigger UI updates.
Understanding Props
Props are one of the most fundamental concepts in React.
If components are functions, props are simply the arguments passed to those functions.
<Button text="Save" />
Inside the component:
function Button({ text }) {
return <button>{text}</button>;
}
The component receives the value and uses it to render UI.
This allows components to be reused with different data.
Why Props Matter
Imagine building an application with hundreds of buttons.
Without props, you would need a separate component for every variation.
Props allow a single component to behave differently based on the data it receives.
This is one of the reasons React applications remain maintainable as they grow.
Children is Just Another Prop
Many developers initially think children is a special React feature.
In reality, it is simply another prop.
<Card>
Hello World
</Card>
React internally treats this similarly to:
<Card children="Hello World" />
The children prop enables component composition, one of React's most powerful design patterns.
Browser Events
Whenever a user interacts with a webpage, the browser generates events.
Examples include:
Clicks
Keyboard input
Mouse movement
Form submission
These events allow JavaScript applications to react to user actions.
Event Bubbling
One important characteristic of browser events is that they bubble upward through the DOM tree.
Imagine the following structure:
<div>
<button>Save</button>
</div>
When the button is clicked, the event first occurs on the button and then travels upward to its parent elements.
This process is known as event bubbling.
Event Delegation
Because events bubble, developers can often attach a single event listener to a parent element instead of attaching listeners to every child.
Code that worked correctly in one browser might behave differently in another.
To solve this problem, React introduced Synthetic Events.
Loading diagram…
When a browser generates a native event, React intercepts it and creates a standardized Synthetic Event object.
This provides a consistent API across different browsers.
React still relies on native browser events underneath, but developers interact with the Synthetic Event abstraction.
Handling Events in React
React event handlers look similar to native JavaScript event handlers.
<button onClick={handleClick}>
Save
</button>
When the button is clicked, React executes the provided handler.
This interaction often triggers state updates, which eventually cause a re-render.
Why Components Render Twice in Development
Many beginners are surprised when they see a component render twice during development.
console.log('render');
This behavior usually occurs because React Strict Mode intentionally performs additional renders.
The goal is to identify:
Side effects during rendering
Unsafe patterns
Violations of rendering purity
This behavior exists only in development and does not occur in production builds.
React Rendering Cycle
Whenever props or state change, React begins a rendering cycle.
Loading diagram…
React recalculates the component output, compares the new Virtual DOM with the previous version, and updates only the parts of the real DOM that changed.
This process allows React applications to remain responsive even as they grow in complexity.
Summary
In this article we explored props, children, event bubbling, event delegation, Synthetic Events, Strict Mode rendering, and the React rendering lifecycle. Together these concepts explain how React applications receive data, respond to user actions, and efficiently update the user interface.