Skip to content

LoroWebsocketClient race condition fix in react strict mode#58

Open
mgrinshpon wants to merge 2 commits intoloro-dev:mainfrom
mgrinshpon:websocket-react-strict-compat
Open

LoroWebsocketClient race condition fix in react strict mode#58
mgrinshpon wants to merge 2 commits intoloro-dev:mainfrom
mgrinshpon:websocket-react-strict-compat

Conversation

@mgrinshpon
Copy link
Copy Markdown

  • Reproduce race condition error with LoroWebsocketClient when mounting in effect in react strict mode via unit test
  • Fix the race condition

Explanation

In development, react has a thing called "strict mode" which mounts, then unmounts, then re-mounts all components.

sendJoinPayload calls void this.connect() as a fallback retry. connect() unconditionally sets shouldReconnect = true, which resurrects a client that was intentionally closed via close(). This manifests in React strict mode where useEffect creates a client + joins a room, and the cleanup function calls close() but a deferred microtask from resolveAuth().then(sendJoinPayload) fires after close(), calling connect() and creating a zombie WebSocket connection.

A piece of sample code that would cause this fire is:

useEffect(() => {
    const client = new LoroWebsocketClient({ url: "ws://localhost:3000" });
    void client.connect();
    client.join({ roomId: "my-room", crdtAdaptor: new LoroAdaptor() });

    return () => {
      client.close();
    };
  }, []);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant