Questions tagged [react-dom]

React package for working with the DOM.

npm install react 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.

Usage

In the browser

var React = require('react');
var ReactDOM = require('react-dom');
 
class MyComponent extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}
 
ReactDOM.render(<MyComponent />, node);

On the server

var React = require('react');
var ReactDOMServer = require('react-dom/server');
 
class MyComponent extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}
 
ReactDOMServer.renderToString(<MyComponent />);
1131 questions
253
votes
10 answers

React vs ReactDOM?

I'm a bit new to react. I see we have to import two things to get started, React and ReactDOM, can anyone explain the difference. I'm reading through the React documentation, but it doesn't say.
Noitidart
  • 35,443
  • 37
  • 154
  • 323
252
votes
25 answers

React - Display loading screen while DOM is rendering?

This is an example from the Google AdSense application page. The loading screen is displayed before the main page is shown. I am not sure how to achieve the same effect with React because if I render the loading screen as a React component, it will…
Thanh Nguyen
  • 5,174
  • 11
  • 43
  • 74
209
votes
6 answers

My React Component is rendering twice because of Strict Mode

My React Component is rendering twice. So, I decided to do a line-by-line debug, and the problem is here: if ( workInProgress.mode & StrictMode) { instance.render(); } React-dom.development.js Is it because of the strict mode? Can I…
Marry Joanna
  • 2,103
  • 2
  • 6
  • 5
126
votes
6 answers

What's the difference between hydrate() and render() in React 16?

I've read the documentation, but I didn't really understand the difference between hydrate() and render() in React 16. I know hydrate() is used to combine SSR and client-side rendering. Can someone explain what is hydrating and then what is the…
shabenda
  • 1,759
  • 3
  • 14
  • 23
93
votes
10 answers

Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'. Type 'null' is not assignable to type 'Element'.ts(2345)

I have index.html
and want to use the component below in separate portal div than root div, import React from 'react'; const portalDiv =…
Hari Kishore
  • 2,201
  • 2
  • 19
  • 28
78
votes
2 answers

What does registerServiceWorker do in React JS?

I'm a newbie in React and I was wondering what is the purpose of registerServiceWorker() in the following code? import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import registerServiceWorker from…
user7232873
75
votes
6 answers

TypeScript error after upgrading version 4 useParams () from react-router-dom Property 'sumParams' does not exist on type '{}'

I get a typeScript error after upgrading to version 4 Used in useParams () from react-router-dom "typescript": "^4.0.2" import { useParams } from 'react-router-dom'; const { sumParams } = useParams(); Property 'sumParams' does not exist on type…
Yoel
  • 7,555
  • 6
  • 27
  • 59
64
votes
4 answers

Is it ok to use ReactDOMServer.renderToString in the browser in areas where React isn't directly managing the DOM?

I'm working on an app using Leaflet (via react-leaflet). Leaflet directly manipulates the DOM. The react-leaflet library doesn't change that, it just gives you React components that you can use to control your Leaflet map in a React-friendly way. In…
Shane Cavaliere
  • 2,175
  • 1
  • 17
  • 18
63
votes
4 answers

React renderToString() Performance and Caching React Components

I've noticed that the reactDOM.renderToString() method starts to slow down significantly when rendering a large component tree on the server. Background A bit of background. The system is a fully isomorphic stack. The highest level App component…
Jon
  • 5,945
  • 4
  • 21
  • 31
62
votes
11 answers

Module not found: Error: Can't resolve 'react-dom/client'

I am using react with the following packages: { "name": "demo", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.0.1", "@testing-library/user-event":…
Carol.Kar
  • 4,581
  • 36
  • 131
  • 264
58
votes
3 answers

React Testing Library gives console error for ReactDOM.render in React 18

After updating to React 18 or creating a new React 18 app from create-react-app, when I run the yarn test command, it gives a console.error as a Warning for each of the render methods used in any of the tests as: console.error Warning:…
56
votes
3 answers

When to use act() in jest unit tests with react-dom

According to the react unit testing documentation: act() To prepare a component for assertions, wrap the code rendering it and performing updates inside an act() call. This makes your test run closer to how React works in the browser. But the…
evolon
  • 1,276
  • 1
  • 10
  • 18
53
votes
3 answers

ReactJS findDOMNode and getDOMNode are not functions

I'm building a web-app with ReactJS and Flux and I'm trying to get the node of my current div using the method findDOMNode and I get the next error: Uncaught TypeError: React.findDOMNode is not a function So, I tried to use getDOMNode and I get…
Victor Castillo Torres
  • 10,581
  • 7
  • 40
  • 50
52
votes
6 answers

this.refs.something returns "undefined"

I have an element with a ref that is defined and ends up getting rendered into the page :
...
I want to access the DOM element properties like offset... or something. However, I keep getting undefined…
John Doe
  • 3,559
  • 15
  • 62
  • 111
44
votes
5 answers

When exactly is `componentDidMount` fired?

This is a recurring problem I have with React. The componentDidMount method is guaranteed to be fired when the component is rendered for the first time so it seems like a natural place to take DOM measurements like heights and offsets. However, many…
disc0dancer
  • 9,185
  • 11
  • 36
  • 46
1
2 3
75 76