fitBounds doesn't get called on first render of graph, but it does in subsequent ones?

hi there!

here’s my code below. essentially I’m wrapping my graph in this ReactFlowComponent and my expectation was that it would automatically “fit bounds” everytime it lays out the elements. however, oddly, this doesnt seem to work for the first render, but it works for the subsequent ones.

any ideas on how to make this work? I suspect it might be that fitBounds is a no-op if there is no ReactFlow component yet?

const ReactFlowComponent = ({
  elements,
  width,
  height,
}: {
  elements: Array<Node | Edge>;
  width: number | undefined;
  height: number | undefined;
}) => {
  // Fit the bounds of the laid-out graph to the size of the pane.
  const { fitBounds, fitView } = useZoomPanHelper();
  fitBounds({ x: 0, y: 0, width: width ?? 0, height: height ?? 0 });
  return (
    <ReactFlow
      elements={elements}
      nodeTypes={{
        nodeWithFormulaOnHover: NodeWithFormulaOnHover,
      }}
    />
  );
};

[leejustin]

I had this same problem and spent forever trying to figure it out. I tried adding it into onLoad as the person above me suggested but it didn’t work.

There was a recommendation buried somewhere deep in the issues in this repo that I tried out. I can’t take all the credit but I can’t find a reference to it at the moment. Here’s a snippet of what worked for me:

  const [reactFlowInstance, setReactFlowInstance] = useState(null);

  const onLoadHandler = (rf) => {
    setReactFlowInstance(rf);
  }

  useEffect(() => {
    if (reactFlowInstance) {
        reactFlowInstance.fitView();
    }
  }, [reactFlowInstance]);

  // The only relevant part below is that `onLoad` uses `onLoadHandler`
  return (
        <ReactFlow
          elements={elements}
          onLoad={onLoadHandler}
          defaultZoom={1.2}
          onElementClick={handleNodeSelection}
          snapToGrid={true}
          snapGrid={snapGrid}
          nodesDraggable={false}
          nodeExtent={nodeExtent}
        >
        </ReactFlow>
  )

This is a simplified version of what I have, but it’s pretty straightforward. This is a second useEffect on top of another one that I have which does something else.

[moklick]

Thanks @datoslabs and @leejustin 😃 we will make it easier in v10 but for now this is the way to do it.