In a component, componentDidMount function perform ReactDOM.render, return null, but ReactDOM.render render to the page normally.
If setTimeout is added to the componentDidMount function, execute in setTimeout ReactDOM.render but it returns normally object.
I don't know if this is a bug.
ReactDOM.render return an object correctly.
import React, { Component } from 'react';
export default class extends Component {
constructor( props ) {
super( props );
}
componentDidMount() {
let div = document.createElement( 'div' );
document.body.appendChild( div );
let aaa = ReactDOM.render( <p>123123</p>, div );
console.log( aaa );// return null
setTimeout( () => {
let div = document.createElement( 'div' );
document.body.appendChild( div );
let bbb = ReactDOM.render( <p>123123</p>, div );
console.log( bbb );// return element string
}, 100 );
}
render() {
return (
<div>
<h1>123</h1>
</div>
);
}
}
Nested ReactDOM.render calls inside a component are no longer guaranteed to be synchronous, see https://github.com/facebook/react/issues/12227.
Per https://reactjs.org/docs/react-dom.html#render, the return of render should not be relied upon and a top level ref should be used instead.
Most helpful comment
Nested
ReactDOM.rendercalls inside a component are no longer guaranteed to be synchronous, see https://github.com/facebook/react/issues/12227.Per https://reactjs.org/docs/react-dom.html#render, the return of
rendershould not be relied upon and a top levelrefshould be used instead.