Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-dom

Package Overview
Dependencies
Maintainers
5
Versions
2021
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-dom

React package for working with the DOM.

  • 18.3.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
20M
decreased by-11.3%
Maintainers
5
Weekly downloads
 
Created

What is react-dom?

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.

What are react-dom's main functionalities?

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
);

Other packages similar to react-dom

Keywords

FAQs

Package last updated on 26 Apr 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc