Component not reloading

[SmoothieAq]

Hi,
I have the problem that my component does not always reload on my bind hook. I am new to react, sorry if I am just making some stupid mistake.

I have a hot observable based on a web socket the emits event irregularly. I pre-subscribe to keep it hot. I have a small component that show the latest value. I uses the bind, and should then reload when new emits are received. It does so most of the time but not consistently, sometime it just skip a reload. It seems total random. It can reload on an emit, then when the next emit comes after several seconds it does not reload. And when after several additional seconds one more emit arrives it does reload again.

Here is my code:

import './App.css'
import {bind, Subscribe} from "@react-rxjs/core";
import {ErrorBoundary, FallbackProps} from "react-error-boundary";
import {map, mergeMap, Observable} from "rxjs";
import {webSocket} from "rxjs/webSocket";

const emit$: Observable<number> = webSocket<Array<Array<never>>>("http://localhost:8000/emits/stream").pipe(
    mergeMap(l => l), map(e => e[2])
)
const [emit, emit$$] = bind(emit$)
emit$$.subscribe(e => {console.log("emit", e)})

function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
    return (
        <div>
            <p>Something went wrong:</p>
            <pre>{error?.message}</pre>
            <button onClick={resetErrorBoundary}>Try again</button>
        </div>
    )
}

const EmitValue: React.FC = () =>  {
    console.log("EmitValue");
    const [emitValue] = bind(emit$$.pipe(map(e => {
        console.log("got", e);
        return e
    })))
    return (<div>{emitValue()}</div>)
}

function AppDemo() {

  return (
    <>
       <ErrorBoundary FallbackComponent={ErrorFallback}><Subscribe>
         <EmitValue/>
       </Subscribe></ErrorBoundary>
    </>
  )
}

export default AppDemo;

Here is some console log

AppDemo.tsx:11 emit 1741633020.002302
(4) AppDemo.tsx:26 got 1741633020.002302
AppDemo.tsx:24 EmitValue
AppDemo.tsx:26 got 1741633020.002302
AppDemo.tsx:24 EmitValue
AppDemo.tsx:26 got 1741633020.002302
AppDemo.tsx:11 emit -72
(6) AppDemo.tsx:26 got -72
AppDemo.tsx:11 emit -71
(6) AppDemo.tsx:26 got -71
AppDemo.tsx:24 EmitValue
AppDemo.tsx:26 got -71
AppDemo.tsx:24 EmitValue
AppDemo.tsx:26 got -71
AppDemo.tsx:11 emit -75
(8) AppDemo.tsx:26 got -75
AppDemo.tsx:11 emit -71
(8) AppDemo.tsx:26 got -71

In this example the component did not reload for the -75 value. The -72 did also not do a reload, but it was almost immediately followed by the -71 value, so that was properly ok.

I do think it is very strange that the "got" logs several times for each emit, but it does not seem directly related to the missing reloads.

I would very much appreciate some help, thank you :-)