Are lifecycle components and subscription callback running on separate thread? - amazon-web-services

Question

When as soon as I send a message, all the messages above it get deleted. In case I fetch all messages again from the database, it works.
So the following is my code body where I am making an amplify request everytime a new message is generated:
const ChatRoomScreen = () => {
const [messages, setMessages] = useState([]);
const [myId, setMyId] = useState(null);
const route = useRoute();
const fetchMessages = async () => {
const messagesData = await API.graphql(
graphqlOperation(
messagesByChatRoom, {
chatRoomID: route.params.id,
sortDirection: "DESC",
}
)
)
//console.log("FETCH MESSAGES")
setMessages(messagesData.data.messagesByChatRoom.items);
}
useEffect(() => {
fetchMessages();
}, [])
useEffect(() => {
const getMyId = async () => {
const userInfo = await Auth.currentAuthenticatedUser();
setMyId(userInfo.attributes.sub);
}
getMyId();
}, [])
useEffect(() => {
const subscription = API.graphql(
graphqlOperation(onCreateMessage)
).subscribe({
next: (data) => {
const newMessage = data.value.data.onCreateMessage;
if (newMessage.chatRoomID !== route.params.id) {
//console.log("Message is in another room!")
return;
}
setMessages([newMessage, ...messages]); //This line creates issues
//If I fetch all messages again from database, it works.
}
});
return () => subscription.unsubscribe();
}, [])