[React] `refs.floating.current` is `null` inside `useEffect` when using `FloatingPortal`

[mwiencek]

[React] `refs.floating.current` is `null` inside `useEffect` when using `FloatingPortal`

[atomiks]

FloatingPortal has to create and mount a new node, which means it's not available until a second render pass. I recommend using elements.floating instead, since it'll reactively check if it exists:

const {elements} = useFloating();

useEffect(() => {
  if (!elements.floating) return;
  // logic...
}, [elements.floating]);

[mwiencek]

Thanks @atomiks! I must have glossed over elements because the documentation implies that it wouldn't generally be used for effects:

The elements as set by the refs, useful for access during rendering (as opposed to inside an event handler or an effect).

However, upon reading the code I see that the elements are actually stored in state and thus are reactive, which is exactly what I need. Thank you for pointing that out.

I guess this issue can be closed due to the technical limitation, but perhaps the documentation can be improved?

[atomiks]

Yeah the docs should probably be updated to specify that refs should only be used in event handlers, while elements used in effects and during render, since it enables reactive checks.