Aggelos Arvanitakis
1 min readJun 3, 2022

--

Great question: Although firebase is smart and multiplexes connections (thus there's no perf overhead on extra connections towards the same key), that doesn't stop it from invoking all the related callbacks you're subscribed to.

This means that `setQueryData` will indeed be called multiple times.

Now, if the value you're subscribed to is a primitive (string, number, etc.), then you shouldn't care since the multiple `setQueryData` calls won't cause additional re-renders.

If the value you're subscribed to is complex (array, object), then it will have a different reference each time and the multiple calls will trigger multiple React re-renders. You might be ok with that (depending on how "heavy" your component rendering is), but if you're not, then a simple deep-equality check between the incoming & previous state value (before the `setQueryData` call) will do it (you'll need to read the existing state in order to compare it). Fast-deep-equal is more than enough here.

Long story short: Yes, it results in multiple calls. You shouldn't care about it if your components are lightweight or if the firebase value is a primitive. If your React components are heavy, then a quick equality comparison before the `setQueryData` should do it.

--

--