Skip to content

Instantly share code, notes, and snippets.

View emplums's full-sized avatar

emplums emplums

View GitHub Profile
emplums /
Last active August 8, 2022 08:16
React 17 & Event Handling


In React 17, event listeners are attached to the node that your React application is using as the root node, instead of the document. In the diagram above, that would be the div under body.

Previously, if you called e.stopPropagation in a React event handler (say the menu component in the diagram), the event would bubble up to the document anyways, and if you had a listener on the document it would get called.

// Text component
const Text = ({ tag, fontSize, children}) => {
// This has to be set as Tag here because JSX wants the tag name to be capitalized, but it renders down to <h1> anyways
// Default to a <p> tag if no tag is set
const Tag = tag ? `${tag}` : 'p';
return <Tag className={classnames(fontSize ? `f${fontSize}` : null)}>{children}</Tag>
export default Text