I need to subscribe to the app-db for a value that I want to check only once when the parent component is rendered. For example, when I click a button "Click me", and there's a certain on-click event being processed, whose status I have saved on the app-db with the list of processes that are being done, I just want to check against that value once, and display two different components based on that value.
If the value is empty, I want to proceed with the normal event. If not, I'd like to show something else to the user, a popup for example.
Now the thing is that, because it's actively listening to the app-db, and the value is changing almost every second (or in a matter of milliseconds), the said popup appears, disappears, reappears, and disappears again super fast with each change to the app-db, which isn't helpful at all.
I would like to just subscribe once, get the value, and do the checks based on the value when the parent was first rendered. And then I'll do something to make that go away.
If I click the "Click me" button once again, that's only when I'd like for it to re-render.
I haven't quite been able to achieve this. I tried numerous methods such as introducing a delay during the dispatch of popup as well as after introducing processing states to the app-db in the first place hoping that since the data will already be in a steady state, it might not change as much, but now that I realize it's actively listening to it, it's expected that the values would change.
I did try using the subscription without the deref, but that only introduced an error to my frontend, so I'm not sure which way to go now.
My error with the component diappearing/reappearing turned out to be triggered by something else. A conflict/mismatch with popup-ids and a dispatch to clear one popup leading to destroying all of them.
But to answer the question, it works when you introduce a (fn []) block after the let binding where you actually do the subscription, and calling the components from inside the fn.