`node.__rf.width` and `node.__rf.height` is not ready in `onLoad`.

I want to do manually layouting in onLoad callback. However size is not ready at that time (However DOM is ready).

It’s hard to find the proper timing for first layouting.

[moklick]

Will be fixed in v10.

[cfree]

I had the same issue and had to add a check to make sure the nodes all had dimensions before I did my layouting:

...
const nodeHasDimension = (el) => el.__rf.width && el.__rf.height;

const Builder = () => {
  const nodes = useStoreState(state => state.nodes);
  const edges = useStoreState(state => state.edges);
  const setElements = useStoreActions(actions => actions.setElements);
  const [shouldLayout, setShouldLayout] = useState(true);

  useEffect(() => {
    if (shouldLayout && nodes.length && nodes.length > 0 && nodes.every(nodeHasDimension)) {
        const elements = [...nodes, ...edges]
        const elementsWithLayout = getLayoutedElements(elements);

        setElements(elementsWithLayout);
        setShouldLayout(false);
      } 
  }, [shouldLayout, nodes, edges, setElements, setShouldLayout]);

  const onLoad = useCallback((reactFlowInstance) => {
    reactFlowInstance.fitView();
    reactFlowInstance.zoomTo(1);
  }, []);

  return (
    <div className={Styles['pane']}>
      <ReactFlow
        elements={initialElements}
        onLoad={onLoad}
        elementsSelectable={false}
      />
    </div>
  )
}