Infinite loop with CollaborationPlugin when changing state

[agscripter]

Hello everyone,

I am trying to show a message to users when the connection status with the WebSocket (using yjs) changes.

This is snippet of my component code:

const [status, setStatus] = useState<ConnectionStatus>(ConnectionStatus.CONNECTING);

const providerFactory = useCallback((id: string, yjsDocMap: Map<string, Doc>): Provider => {
    if (providerRef.current) {
        return providerRef.current as unknown as Provider;
    }
    
    let doc = yjsDocMap.get(id);
    if (!doc) {
        doc = new Doc();
        yjsDocMap.set(id, doc);
    } else {
        doc.load();
    }
    
    const wsProvider = new WebsocketProvider(getWebSocketHost(), id, doc, {
        connect: false,
        params: { accessToken: collaborative?.accessToken ?? '' },
        disableBc: true,
        resyncInterval: 1000
    });
    
    wsProvider.on('status', (event) => {
        setStatus(ConnectionStatus[(event.status as string).toUpperCase()]);
    });
    
    wsProvider.on('connection-error', () => {
        setStatus(ConnectionStatus.ERRORED);
    });
}, []);

And the CollaborationPlugin is also being mount in the same component that I have the useState and the providerFactory.
And the status state is being used below to show a message and to enable/disable the Editor.

However, when the setStatus is invoked (state changes), it seems to trigger the reconnection for the WebsocketProvider, causing an infinite loop, the status goes from Connecting -> Connected -> Disconnected -> Connecting -> Connected, etc.

Anyone knows how can I get it fixed? I basically want to change state accordingly to the connection status.

Thank you !

[etrepum]

Without a full repro that is easy to inspect, I don't think anyone will help you solve this. It's likely a violation or misunderstanding of the rules of react (either in your code or @lexical/yjs) but there's just not enough context here.