React: [Hooks API] Content of the portal being removed when the props change

[lffg]

Hello,

After playing around with the new React Hooks API, I think that I found a new bug:

What is the current behavior?

While using the version with hooks (16.8.0-alpha), when a prop of a component that uses a _react portal_ is changed, the portal content simply disappears, as can be seen in the following example:

https://codesandbox.io/s/rjy02x0l0m

_(Click on the ++ button to test.)_

What is the expected behavior?

To demonstrate the normal behavior, I've created another example using class components:

https://codesandbox.io/s/kmyrq72x47

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

I found the bug in the 16.8.0-alpha version.
Tested and working on 16.7.0.

[hamlim]

This seems to be expected behavior. When the Dialog component is re-rendered it re-creates the el mount element. However useEffect was only called on the first render because of the second argument which is an empty array. So we never attach the el element to the dialog root element, so its not visibly within the document.

To fix this you could use a useRef hook to store the el mount element for the portal on subsequent renders, or if you want to re-create the el element on each re-render then you can add it to the useEffect hook.

See a working example of the first solution here: https://codesandbox.io/s/64z9p4v563 (this one should only create a single el element no matter the number of times Dialog re-renders if I understand correctly). Or see a working example of the second solution here: https://codesandbox.io/s/n9r9z9661j.

[lffg]

Thanks for the clarification. 😄