Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
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
15.0.0 (April 7, 2016)
document.createElement
instead of generating HTML. Previously we would generate a large string of HTML and then set node.innerHTML
. At the time, this was decided to be faster than using document.createElement
for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using createElement
we can make other parts of React faster. (@sophiebits in #5205)data-reactid
is no longer on every node. As a result of using document.createElement
, we can prime the node cache as we create DOM nodes, allowing us to skip a potential lookup (which used the data-reactid
attribute). Root nodes will have a data-reactroot
attribute and server generated markup will still contain data-reactid
. (@sophiebits in #5205)<span>
s. ReactDOM will now render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. If you were targeting these <span>
s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components. (@mwiencek in #5753)null
now uses comment nodes. Previously null
would render to <noscript>
elements. We now use comment nodes. This may cause issues if making use of :nth-child
CSS selectors. While we consider this rendering behavior an implementation detail of React, it's worth noting the potential problem. (@sophiebits in #5451)null
. We added support for defining stateless components as functions in React 0.14. However, React 0.14 still allowed you to define a class component without extending React.Component
or using React.createClass()
, so we couldn’t reliably tell if your component is a function or a class, and did not allow returning null
from it. This issue is solved in React 15, and you can now return null
from any component, whether it is a class or a function. (@jimfb in #5884)React.DOM
element helper, but JSX and React.createElement
work on all tag names.) All SVG attributes that are implemented by the browsers should be supported too. If you find any attributes that we have missed, please let us know in this issue. (@zpao in #6243)<span>
s.React.cloneElement()
now resolves defaultProps
. We fixed a bug in React.cloneElement()
that some components may rely on. If some of the props
received by cloneElement()
are undefined
, it used to return an element with undefined
values for those props. We’re changing it to be consistent with createElement()
. Now any undefined
props passed to cloneElement()
are resolved to the corresponding component’s defaultProps
. (@truongduy134 in #5997)ReactPerf.getLastMeasurements()
is opaque. This change won’t affect applications but may break some third-party tools. We are revamping ReactPerf
implementation and plan to release it during the 15.x cycle. The internal performance measurement format is subject to change so, for the time being, we consider the return value of ReactPerf.getLastMeasurements()
an opaque data structure that should not be relied upon. (@gaearon in #6286)These deprecations were introduced nine months ago in v0.14 with a warning and are removed:
React
top-level export: findDOMNode
, render
, renderToString
, renderToStaticMarkup
, and unmountComponentAtNode
. As a reminder, they are now available on ReactDOM
and ReactDOMServer
. (@jimfb in #5832)batchedUpdates
and cloneWithProps
. (@jimfb in #5859, @zpao in #6016)setProps
, replaceProps
, and getDOMNode
. (@jimfb in #5570)react/addons
entry point is removed. As a reminder, you should use separate react-addons-*
packages instead. This only applies if you use the CommonJS builds. (@gaearon in #6285)children
to void elements like <input>
was deprecated, and now throws an error. (@jonhester in #3372)refs
(e.g. this.refs.div.props
) were deprecated, and are removed now. (@jimfb in #5495)Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.
LinkedStateMixin
and valueLink
are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: react-linked-input. (@jimfb in #6127)<input value={null}>
as a request to clear the input. However, React 0.14 has been ignoring value={null}
. React 15 warns you on a null
input value and offers you to clarify your intention. To fix the warning, you may explicitly pass an empty string to clear a controlled input, or pass undefined
to make the input uncontrolled. (@antoaravinth in #5048)ReactPerf.printDOM()
was renamed to ReactPerf.printOperations()
, and ReactPerf.getMeasurementsSummaryMap()
was renamed to ReactPerf.getWasted()
. (@gaearon in #6287)px
automatically. This version now warns in this case (ex: writing style={{width: '300'}}
. Unitless number values like width: 300
are unchanged. (@pluma in #5140)ref
and key
from the props. (@prometheansacrifice in #5744)props
object to super()
in the constructor. (@prometheansacrifice in #5346)setState()
inside getChildContext()
. (@raineroviir in #6121)onclick
which should be onClick
. (@ali in #5361)NaN
values in style
. (@jontewks in #5811)value
and defaultValue
for an input. (@mgmcdermott in #5823)onFocusIn
or onFocusOut
handlers as they are unnecessary in React. (@jontewks in #6296)ReactDOM.render()
, this.setState()
, or this.forceUpdate()
. (@conorhastings in #5193 and @gaearon in #6310)TestUtils.Simulate()
now prints a helpful message if you attempt to use it with shallow rendering. (@conorhastings in #5358)arrayOf()
and objectOf()
provide better error messages for invalid arguments. (@chicoxyzzy in #5390)componentWillReceiveProps()
lifecycle method is now consistently called when context
changes. (@milesj in #5787)React.cloneElement()
doesn’t append slash to an existing key
when used inside React.Children.map()
. (@ianobermiller in #5892)cite
and profile
HTML attributes. (@AprilArcus in #6094 and @saiichihashimoto in #6032)cssFloat
, gridRow
and gridColumn
CSS properties. (@stevenvachon in #6133 and @mnordick in #4779)borderImageOutset
, borderImageWidth
, borderImageSlice
, floodOpacity
, strokeDasharray
, and strokeMiterlimit
as unitless CSS properties. (@rofrischmann in #6210 and #6270)onAnimationStart
, onAnimationEnd
, onAnimationIteration
, onTransitionEnd
, and onInvalid
events. Support for onLoad
has been added to object
elements. (@tomduncalf in #5187, @milesj in #6005, and @ara4n in #5781)href={null}
) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value. (@syranide in #1510)children
to strings for Web Components. (@jimfb in #5093)<use>
events. (@edmellum in #5720)<select>
is unmounted while its onChange
handler is executing. (@sambev in #6028)ref
. (@yiminghe in #6095)Object.is
is used in a number of places to compare values, which leads to fewer false positives, especially involving NaN
. In particular, this affects the shallowCompare
add-on. (@chicoxyzzy in #6132)loose-envify
instead of envify
so it installs fewer transitive dependencies. (@qerub in #6303)getMountedInstance()
. (@glenjamin in #4918)render()
. (@simonewebdesign in #5411)Object.create
and Object.freeze
in older environments. It still, however, requires ES5 shims in those environments. (@dgreensp in #4959)data-
attributes with names that start with numbers. (@nLight in #5216)suppressContentEditableWarning
prop for components like Draft.js that intentionally manage contentEditable
children with React. (@mxstbr in #6112)createClass()
on complex specs. (@sophiebits in #5550)FAQs
React package for working with the DOM.
The npm package react-dom receives a total of 19,503,818 weekly downloads. As such, react-dom popularity was classified as 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.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.