When used with react strict mode, the realtime database does not subscribe properly.

Bug report

Describe the bug

When we develop with the React strict mode, we can’t build subscriptions correctly.

To Reproduce

Turn on strict mode:

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Using subscriptions in components:

function App() {
  useEffect(() => {
    const subs = supabase
      .from("objects")
      .on("UPDATE", (payload) => {
        dispatch(updateGameObject(payload.new.data));
      })
      .subscribe(console.log);
    subs.onClose(() => {
      console.log("on closed");
      supabase.removeAllSubscriptions();
    });
    return () => {
      subs.unsubscribe();
    };
  }, []);
  return <div />
}

Expected behavior

In strict mode, useEffect is triggered twice. In theory, it should quickly establish and close a connection once, and then establish it again.

However, in practice, it is not possible to subscribe properly. In strict mode, subscribe() will receive the CLOSED signal directly at the first time.

Screenshots

The output in the console is as follows:

System information

• OS: Windows
• Browser (if applies): Edge
• Version of supabase-js: ^1.35.4
• Version of Node.js: 16
• Version of react: 18

Additional context

In supabase/supabase#7771 it is suggested that turning on strict mode can cause problems.

[ricardosikic]

I have removed <ReactStrictMode> and problem solved

[w3b6x9]

if i pass config: { broadcast: { ack: true }} the default self: false disappears.

@pixtron that’s fine as the Realtime server will take the absence to mean self is false but i’ll go back and make the default config better. thanks for pointing this out.