Blocks ability to use child refs?

[AndrewRayCode]

This library looks very useful, and I hope to get it working!

I have a component where there's a ref in a child of re-flex:

const Component: React.FC = () => {
  useEffect(() => {
    if (!graphRef.current) {
      console.log('no graphref!', graphRef);
      return;
    }
    // graphRef...
  }, [graphRef.current]);

  return (
    <ReflexContainer orientation="vertical">
      <ReflexElement>
        <canvas ref={graphRef}></canvas>
      </ReflexElement>
      <ReflexSplitter />
      <ReflexElement>
        right
      </ReflexElement>
    </ReflexContainer>
  );
};

When the useEffect hook is called, there is no graphRef, even when adding the ref as a dependency to useEffect.

I'm not sure why this is the case, as my understanding is cloneElement, used in the source should preserve child refs.

I've created a codesandbox showing this: https://codesandbox.io/s/bold-breeze-3tgkh?file=/src/index.js

Interestingly, if you simply console.log(myRef) in the codesandbox, it shows the htmlelement, so shortly after the render happens something populates the ref. Does re-flex do something async? Either way this library seems to interfere with the expected order of operations in React rendering.

[leefsmp]

Could you check that article please.

I've seen 2 previous issues that seem pretty close to what you are experiencing: #119 & #138.

Hope that helps.

[AndrewRayCode]

Ah yes sounds like my issue as well. What's confusing to me is this all seems like it's synchronous behavior - My component renders, which renders your component, it does cloneElement but it's still synchronous, returns all of those react elements in one go - and then the effect hooks are called, so the ref should be set? The article makes sense for when a ref changes / gets moved, in this case it seems like after the elements are returned, the ref should be correct?

[leefsmp]

I'm not experienced enough with hooks to tell you why, but applying the approach from the article solves the problem so I was good with that.