React useContext setState only updates first time - arrays

Question

I'm currently building an app which allows a user to collect stamps by scanning a QR code. I have a Firebase Firestore snapshotlistener attached which listens for new stamps being added to that user. And rather than to fetch the new total amount of stamps for that user, I wanted to use the payload of the snapshot and add it to the list of stamps which is saved in a Context.
Unfortunately, this only works the first time when the app has been started. The procedure looks like this:
QR code gets scanned
New snapshot is received with newly added stamps (1 or more)
I'm logging the current state of total stamps to console, which looks OK.
The new stamps get added to the state context.
Logging the context state changes show the stamps were added correctly.
But the second time or any after that it looks like this:
QR code gets scanned
New snapshot is received with newly added stamps (1 or more)
I'm logging the current state of total stamps to console, but this still looks the same as before the first attempt.
The new stamps get added to the old state context.
Logging the context state changes show the stamps were added but the first was removed, so basically the first stamp has been overwritten.
You'd think this is simple, "just check you're dependency arrays". But this looks all okay to me.
Here's how my setup looks:
Context:
const AuthContextProvider = ({ children }: Props) => {
const [user, setUser] = useState<FirebaseAuthTypes.User>();
const [userData, setUserData] = useState<FirestoreUser>();
const [stamps, setStamps] = useState<GetMyStampsResponse>();
const [isLoading, setLoading] = useState(true);
// Unimportant for issue
const onAuthStateChanged = useCallback(
async (response: FirebaseAuthTypes.User | null) => {
...
},
[...]
);
useEffect(() => {
const unsubscribe = auth().onUserChanged(onAuthStateChanged);
return unsubscribe;
}, [onAuthStateChanged]);
return (
<AuthContext.Provider
value={{
isLoading,
stamps,
setStamps,
user,
userData,
reloadUser,
}}>
{children}
</AuthContext.Provider>
);
};
useAuth hook to be used in my components
import storage from '#react-native-firebase/storage';
import cloneDeep from 'lodash/cloneDeep';
import { useCallback, useContext } from 'react';
const useAuth = () => {
const { stamps, setStamps, reloadUser, userData, user, isLoading } =
useContext(AuthContext);
/**
* Add stamps that were received through a listener. This way we don't have to rely on reloadUser, which is more expensive.
*/
const addStampsFromListener = useCallback(
async (newStamps: FirestoreStamp[]) => {
let newStampsState = cloneDeep(stamps);
const newStampHasKnownStampcard = newStampsState?.cards.find(
c => c.ref.path === newStamps[0].stampcardRef.path,
);
console.log('current stamps state', newStampsState?.stamps.length);
if (newStampHasKnownStampcard) {
newStampsState = {
...newStampsState!,
stamps: newStampsState!.stamps.concat(newStamps),
};
} else {
const [stampcard, business] = await Promise.all([
stampcardApi.getStampcardByRef(newStamps[0].stampcardRef),
businessApi.getBusiness(newStamps[0].businessId),
]);
const imageUrl = await storage()
.ref(stampcard!.stampImage)
.getDownloadURL();
const stampcardWithRef: StampCardDataWithRef = {
...stampcard!,
imageUrl,
businessId: newStamps[0].businessId,
ref: newStamps[0].stampcardRef,
};
newStampsState = {
...newStampsState,
businesses: (newStampsState?.businesses ?? []).concat(business!),
cards: (newStampsState?.cards ?? []).concat(stampcardWithRef),
stamps: (newStampsState?.stamps ?? []).concat(newStamps),
};
}
setStamps(newStampsState);
return newStampsState;
},
[setStamps, stamps],
);
...
return {
addStampsFromListener,
updateStampsFromListener,
isLoading,
data: userData,
logout,
reloadUser,
stamps,
user,
};
};
And finally, the use of this context hook in my screen:
const HomeConsumerScreen = () => {
const {
stamps: stampcards,
reloadUser,
addStampsFromListener,
updateStampsFromListener,
} = useAuth();
const subscribeToStamps = useCallback(() => {
if (refIsSubscribedToStamps.current) return; // Prevent initialization when already running
const unsubscribe = stampApi.subscribeToStamps(
/**
* Callback for receiving new stamps
*/
querySnapshot => {
error && setError(undefined);
if (!refIsSubscribedToStamps.current) {
// First snapshot contains current state of all stamps belonging to a user
return;
}
const data = querySnapshot.map(doc =>
doc.doc.data(),
) as FirestoreStamp[];
addStampsFromListener(data).then(nextState =>
showDone('newStamp', data, nextState),
);
},
/**
* Initializer
*/
() => {
refIsSubscribedToStamps.current = true;
},
/**
* Error callback
*/
e => {
setError(e.message);
console.error('onSnapShot', e);
},
);
return unsubscribe;
}, [addStampsFromListener, error, showDone, updateStampsFromListener]);
useEffect(() => {
// Listen for changes to single stampcard
const unsubscribe = subscribeToStamps();
return () => {
unsubscribe && unsubscribe();
refIsSubscribedToStamps.current = false;
};
// Adding 'subscribeToStamps' to dependency hook will cause
// the listener to unmount&remount on every callback.
// It will fix the issue that I'm trying to solve here.... :(
}, []);
};
So it seems to revolve around adding subscribeToStamps to the useEffect dependency array, but that causes the listener to unmount&mount again which is just more costly.
Any advice?