For the chat app with firestore and react, there is a flickering on userChats sidebar.

[J T]

At 2:01:21 of the youtube video https://youtu.be/k4mjF4sPITE?t=7282, notice when he types in an input the userChats names on the left sidebar (i.e. John and Adam) re-orders momentarily before snapping back to the correct sorted arrangement by date. I've been trying to debug this for the longest time, any idea how to prevent it?

[J T]

i found the error. Do avoid using serverTimestamp() . That is the reason it causes the flicker. Whenever u updateDoc and pass in serverTimestamp() to update the date field, there is an intermediate moment where firestore sets the date value to null, causing the order of the chat u are currently typing in to be relegated to last position because it is null - which is incorrect! The latest chat should be sorted right at the top. To preent this, simply replace with Timestamp.now() for all date update values on firestore documents so there isn't this intermediate moment. In other words, u wana prevent 2 subscription fires of onSnapshot - 1 intermediate (with the null value on chat resulting in wrong sorted order) and the 2nd final call (with the correctly sorted chats)

[Mnsrff]

i found the error. Do avoid using serverTimestamp() . That is the reason it causes the flicker. Whenever u updateDoc and pass in serverTimestamp() to update the date field, there is an intermediate moment where firestore sets the date value to null, causing the order of the chat u are currently typing in to be relegated to last position because it is null - which is incorrect! The latest chat should be sorted right at the top. To preent this, simply replace with Timestamp.now() for all date update values on firestore documents so there isn't this intermediate moment. In other words, u wana prevent 2 subscription fires of onSnapshot - 1 intermediate (with the null value on chat resulting in wrong sorted order) and the 2nd final call (with the correctly sorted chats)

So everything else is working fine in your case?