How to reliably pass `root` from a Ref?

[KazimirPodolski]

I'm trying to use root because I have scrollable modal as a viewport:

const parentRef = useRef(null);

return (
  <Parent ref={parentRef}>
    {someList.map((item) => (
      <RenderIfVisible root={parentRef.current}>
        {item}
      </RenderIfVisible>
    )}
  </Parent>
);

It doesn't work right - it seems Observer's root is still document. I think this is happening because ref's current is not immediately available and by the time Observer is created it's still null.

If I do it this way it seems to work right:

{parentRef.current && <RenderIfVisible root={parentRef.current}>
  {item}
</RenderIfVisible>}

Is it correct? Is it a good practice? Should RenderIfVisible track root's availability?

[szimek]

I have the same problem. Unfortunately, the provided workaround assumes that the component will be re-rendered at least once. If it's rendered only once, one would need to force the second re-render to make the parentRef.current be set.