Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
react-dom
Advanced tools
The react-dom package provides DOM-specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements in response to data changes. It is a companion package to React that facilitates rendering components to the DOM and interacting with the DOM tree.
Rendering React Elements
This feature allows you to render a React element into the DOM in the supplied container and return a reference to the component (or returns null for stateless components).
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Component Lifecycle Management
react-dom manages the lifecycle of components, including mounting, updating, and unmounting components.
class MyComponent extends React.Component {
componentDidMount() {
// Code to run when the component is mounted
}
componentWillUnmount() {
// Code to run before the component is unmounted and destroyed
}
}
Handling Events
react-dom provides a synthetic event system that wraps the native event system, providing a cross-browser interface to native events.
function MyComponent() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
Server-side Rendering
react-dom/server provides methods for rendering components to static markup (typically used on the server) such as renderToString and renderToStaticMarkup.
ReactDOMServer.renderToString(
<MyComponent />
);
Portals
Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
ReactDOM.createPortal(
child,
container
);
Preact is a fast 3kB alternative to React with the same modern API. It provides similar functionalities for rendering UIs but with a smaller footprint, making it a good choice for performance-sensitive applications.
Inferno is an extremely fast, React-like library for building high-performance user interfaces on both the client and server. It offers a similar component-based UI building experience but focuses on performance optimizations.
This package is part of the Vue ecosystem and provides server-side rendering capabilities similar to react-dom/server. It's used to render Vue components on the server and send the static markup to the client.
react-dom
This package serves as the entry point of the DOM-related rendering paths. It is intended to be paired with the isomorphic React, which will be shipped as react
to npm.
npm install react react-dom
var React = require('react');
var ReactDOM = require('react-dom');
class MyComponent extends React.Component {
render() {
return <div>Hello World</div>;
}
}
ReactDOM.render(<MyComponent />, node);
var React = require('react');
var ReactDOMServer = require('react-dom/server');
class MyComponent extends React.Component {
render() {
return <div>Hello World</div>;
}
}
ReactDOMServer.renderToString(<MyComponent />);
react-dom
findDOMNode
render
unmountComponentAtNode
react-dom/server
renderToString
renderToStaticMarkup
16.3.0 (March 29, 2018)
React.createRef()
API as an ergonomic alternative to callback refs. (@trueadm in #12162)React.forwardRef()
API to let components forward their refs to a child. (@bvaughn in #12346)React.Fragment
. (@XaveScor in #11823)React.unstable_AsyncComponent
with React.unstable_AsyncMode
. (@acdlite in #12117)setState()
on an unmounted component. (@sophiebits in #12347)getDerivedStateFromProps()
lifecycle and UNSAFE_
aliases for the legacy lifecycles. (@bvaughn in #12028)getSnapshotBeforeUpdate()
lifecycle. (@bvaughn in #12404)<React.StrictMode>
wrapper to help prepare apps for async rendering. (@bvaughn in #12083)onLoad
and onError
events on the <link>
tag. (@roderickhsiao in #11825)noModule
boolean attribute on the <script>
tag. (@aweary in #11900)onKeyPress
in more browsers. (@nstraub in #10514)value
and defaultValue
to ignore Symbol values. (@nhunzaker in #11741)opera
with a null
value. @alisherdavronov in #11854)<option selected>
. (@watadarkstar in #11821)ReactDOM.unstable_createPortal()
in favor of ReactDOM.createPortal()
. (@prometheansacrifice in #11747)React.Component
. (@wyze in #11993)this.state
of different components getting mixed up. (@sophiebits in #12323)toTree()
. (@maciej-ka in #12107 and @gaearon in #12154)null
for components that don't set it. (@jwbay in #11965)contextTypes
. (@koba04 in #11922)ReactIs.isValidElementType()
to help higher-order components validate their inputs. (@jamesreggio in #12483)react-reconciler/persistent
for building renderers that use persistent data structures. (@gaearon in #12156)finalizeInitialChildren()
. (@jquense in #11970)useSyncScheduling
from the host config. (@acdlite in #11771)FAQs
React package for working with the DOM.
The npm package react-dom receives a total of 0 weekly downloads. As such, react-dom popularity was classified as not popular.
We found that react-dom demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.