Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Question: ReactDOM render call in useEffect delayed until first update

See original GitHub issue

Do you want to request a feature or report a bug?

A question, maybe a bug but more likely a misunderstanding on my side.

What is the current behavior?

Calling ReactDOM.render from within a useEffect won’t actually render to the dom unless an update is triggered from anywhere else within the entire react app.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

See: https://codesandbox.io/s/jl02nrqznw

What is the expected behavior?

After the RendersAnotherRoot component is initially rendered, the useEffect function is called and then the subsequent ReactDOM.render call renders the separate react root.

Note: Uncommenting the setCount update from within the RendersAnotherRootWithUpdate component will then render the content from both useEffect render calls.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

react 16.8.1 react-dom 16.8.1