React: Question: ReactDOM render call in useEffect delayed until first update

[hamlim]

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

[hamlim]

Tested with React.uselayoutEffect in only one of the components, and it seems like both testing components had their inner ReactDOM.render calls flushed to the DOM, which is even more confusing to me 🤔

Example: https://codesandbox.io/s/l4k2z31om

[gaearon]

Looks buggy to me.

[gaearon]

https://github.com/facebook/react/pull/14799

[hamlim]

Thanks for looking into this and fixing it!

[gaearon]

Canary 0.0.0-0e4135e8c should have the fix. This will make it into 16.8.2.

[gaearon]

Fixed in 16.8.2.
https://codesandbox.io/s/nwnz44q294

[petegivens]

Is this still an issue in react-test-renderer? I don't have a repro (sorry), but I am seeing what I believe to be this same issue on 16.8.2 using jest and react-testing-library. I have a component that calls useLayoutEffect to append a root div to the document body. The component returns a React portal which never appears in my tests. If I add a useState call to my component and then update some state, the tests work as expected.