Connection Events

React Flow emits different events during the connection process that you can use to update your UI or your flow in different ways. The example below demonstrates which events are fired and when.

import React, { useCallback } from 'react';
import { ReactFlow, Background } from '@xyflow/react';
 
import { useState } from 'react';
import { useEffect } from 'react';
 
import '@xyflow/react/dist/style.css';
 
 
const initialNodes = [
  { id: 'a', position: { x: -100, y: 0 }, data: { label: 'A' } },
  { id: 'b', position: { x: 100, y: 0 }, data: { label: 'B' } },
  { id: 'c', position: { x: 0, y: 100 }, data: { label: 'C' } },
];
 
const initialEdges = [{ id: 'b->c', source: 'b', target: 'c' }];
 
const Flow = () => {
  const [events, setEvents] = useState({
    onReconnectStart: false,
    onConnectStart: false,
    onConnect: false,
    onReconnect: false,
    onConnectEnd: false,
    onReconnectEnd: false,
  });
 
  const onReconnectStart = useCallback(() => {
    console.log('onReconnectStart');
    setEvents({
      onReconnectStart: true,
      onConnectStart: false,
      onConnect: false,
      onReconnect: false,
      onConnectEnd: false,
      onReconnectEnd: false,
    });
  }, []);
 
  const onConnectStart = useCallback(() => {
    console.log('onConnectStart');
    setEvents((events) => ({
      ...events,
      onConnectStart: true,
      onConnect: false,
      onReconnect: false,
      onConnectEnd: false,
      onReconnectEnd: false,
    }));
  }, []);
 
  const onConnect = useCallback(() => {
    console.log('onConnect');
    setEvents({
      onReconnectStart: false,
      onConnectStart: false,
      onConnect: true,
      onReconnect: false,
      onConnectEnd: false,
      onReconnectEnd: false,
    });
  }, []);
 
  const onReconnect = useCallback(() => {
    console.log('onReconnect');
    setEvents({
      onReconnectStart: false,
      onConnectStart: false,
      onConnect: false,
      onReconnect: true,
      onConnectEnd: false,
      onReconnectEnd: false,
    });
  }, []);
 
  const onConnectEnd = useCallback(() => {
    setEvents((events) => ({
      ...events,
      onReconnectStart: false,
      onConnectStart: false,
      onConnectEnd: true,
    }));
  }, []);
 
  const onReconnectEnd = useCallback(() => {
    console.log('onReconnectEnd');
    setEvents((events) => ({
      ...events,
      onReconnectStart: false,
      onConnectStart: false,
      onReconnectEnd: true,
    }));
  }, []);
 
  useEffect(() => {
    if (!events.onReconnectEnd && !events.onConnectEnd) return;
 
    let timer = window.setTimeout(() => {
      setEvents({
        onReconnectStart: false,
        onConnectStart: false,
        onConnect: false,
        onReconnect: false,
        onConnectEnd: false,
        onReconnectEnd: false,
      });
    }, 500);
 
    return () => window.clearTimeout(timer);
  });
 
  return (
    <>
      <ReactFlow
        nodes={initialNodes}
        edges={initialEdges}
        edgesReconnectable={true}
        onConnectStart={onConnectStart}
        onConnect={onConnect}
        onConnectEnd={onConnectEnd}
        onReconnectStart={onReconnectStart}
        onReconnect={onReconnect}
        onReconnectEnd={onReconnectEnd}
        fitView
        style={{ backgroundColor: "#F7F9FB" }}
        >
          <Background />
        </ReactFlow>
      <div id="event-list">
        {Object.entries(events).map(([name, active]) => (
          <p key={name} style={{ opacity: active ? 1 : 0.2 }}>
            {name}
          </p>
        ))}
      </div>
    </>
  );
};
 
export default Flow;

For a new connection created by dragging from a handle, the following events are called in order:

onConnectStart is called with the mouse event and an object containing the source node, potentially the source handle id, and the handle type.
onConnect is only called when the connection is released on a handle that is connectable. It is called with a complete connection object containing the source and target node, and the source and target handle ids if present.
onConnectEnd is called when a connection is released, regardless of whether it was successful or not. It is called with the mouse event.

When an edge is reconnected by dragging an existing edge, the following events are called in order:

onReconnectStart is called when a reconnectable edge is picked up. It is called with the mouse event, the edge object that is being reconnected, and the type of the stable handle.
onConnectStart is called as above.
onReconnect is called when the edge is released on a handle that is reconnectable. It is called with the old edge object and the new connection object.
onConnectEnd is called as above.
onReconnectEnd is called when the edge is released, regardless of whether the reconnection whas successful or not. It is called with the mouse event, the edge that was picked up, and the type of the stable handle.

You can see many of these events in use in our add node on edge drop and temporary edges examples!

Feature Overview Dark Mode