Portal breaks when using createRef

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Portal component should accept refs created through createRef()

Current Behavior 😯

Portal blows up when doing so

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/pyp3p5r0kx

1. Create ref in component constructor with createRef
2. Pass ref to Portal
3. That’s it, Portal breaks and complains the container is not a valid element:

Context 🔦

I’m upgrading my app to React 16 and doing performance optimizations, one of which is avoiding inline functions as props, as they get renewed every time the component updates and triggers re-renders down the whole tree.

Your Environment 🌎

Tech	Version
Material-UI	v3.9.3
React	v16.8.4
Browser
TypeScript
etc.

[desktp]

That’s my interpretation from

Note The examples below have been updated to use the React.createRef() API introduced in React 16.3. If you are using an earlier release of React, we recommend using callback refs instead.

In any case, the added explanation in the docs suffice, and my problem is solved. Thanks.

[eps1lon]

With ref-objects you don’t know when the instance changes the ref points to which is required for a portal. React portals need a DOM element not a ref.

which is the recommended way of dealing with refs moving forward.

I’m not aware of such a blanket recommendation. The docs still have a section for callback refs.

The example I used can also be ported to ref-objects. However, it becomes increasingly complicated to know when the DOM instance is available if you forward the ref to another component.