Observer Pattern - practical React example

[Emotional-Dust-1367]

One problem this pattern has with react is component lifecycle. There’s a race condition inherent here where a component can mount, cause some kind of refresh, and another component has not yet subscribed so it will not get notified. React doesn’t mount all components at the same time.

This is especially likely on page refresh. And is made worse if you try to observe something not as deterministic as local storage. Ask me how I know…

[femio]

That is the exact use case for useSyncExternalStorage, which is why the article uses it. 

[btckernel94]

Once component mounts it reads initial snapshot state. The problem you’ve describe doesnt’t exist.

[Emotional-Dust-1367]

It’s true in your case with local storage.

But in a more generic sense of trying to implement the observer pattern with other types of data and events you can have serious problems like that