Question: How to use "useRef" when it is passed through Portal?

Hi. I create ref in root component in my app. When i bind ref to element, which is a child of another element that is render in the portal, ref “current” property is always undefined.

Sandbox with example here: https://codesandbox.io/s/refs-through-portals-test-o5lqr

How can i use refs with portals with expected behaviour?

[vkurchatkin]

Ok, so here are some thoughts. When you want to apply some DOM-base library that’s what you usually do (and that’s probably what you want to do):

const ref = useRef();

React.useEffect(() => {
  libraryFunction(ref.current);
}, []);

return <div ref={ref}></div>

However, it is only safe to do if you pass the ref to a node that is available right after the component is mounted and until the component is unmounted.

Some examples where it won’t work:

return <div>{ foo ? <div ref={ref}/>: null }</div>

div can be mounted later and then remounted multiply times

return <Foobar><div ref={ref}/></Foobar>

Who knows, what Foobar does to it children? Could just pass them through, could render conditionally.

So, if you want to use this pattern, you need to move ref in such a way that is not rendered conditionally and is not wrapped in any custom components that doesn’t guarantee to pass through their children unconditionally.

function ModalContent() {
 const ref = useRef();
 // ...
  return <>
       <h3>Test modal</h3>
        <div ref={ref}>Test div with ref prop</div>
    </>
}

[vkurchatkin]

but when modal is shown, ref.current is still undefined.

That is not the case, the ref is fine, you just always log before it is populated