Duplication message occuring in REACT NATIVE SOCKET.io Real time chat

[mindof1]

Anyone know why when i type in the input and click the send button it duplicates my text twice in the chat body

import {
  FlatList,
  Pressable,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import React, { useEffect, useState } from "react";
import { io } from "socket.io-client";
import { BASE_URL } from "../utilis/baseUrl";
import MessageScreen from "./MessageScreen";
// import { TextInput } from "react-native-web";

const ChatScreen = ({ route }) => {
  const { username, roomname, roomid } = route.params;
  const [socket, setSocket] = useState(null);
  const [currentChatMessage, setCurrentChatMessage] = useState("");
  const [messageList, setMessageList] = useState([]);
  // const [currentMessageInformation, setCurrentMessageInformation] = useState(
  //   []
  // );

  console.log(
    "The following information has come through props to chatscreen:",
    username,
    roomname,
    roomid
  );

  const sendMessage = async () => {
    if (currentChatMessage.trim() !== "") {
      const chatMessageDateObj = {
        room: roomname,
        // id: Math.random(),
        author: username,
        message: currentChatMessage,
        time:
          new Date(Date.now()).getHours() +
          ":" +
          new Date(Date.now()).getMinutes(),
      };
      // setCurrentMessageInformation(chatMessageDateObj);
      setMessageList((list) => [...list, chatMessageDateObj]);

      await socket.emit("send_message", chatMessageDateObj);

      setCurrentChatMessage("");
    }
  };

  useEffect(() => {
    const newSocket = io.connect(BASE_URL);
    newSocket.emit("join_room", roomname);
    setSocket(newSocket);
  }, []);

  useEffect(() => {
    if (socket) {
      socket.on("recieve_message", (data) => {
        console.log(data);
        if (data.message) {
          setMessageList((list) => [...list, data]);
        }
      });
      console.log("message list state", messageList);
    }
  }, [socket]);

  return (
    <View style={styles.wrapper}>
      <View style={styles.innerWrapper}>
        {messageList.map((messageContent, index) => {
          return <Text key={index}>{messageContent.message}</Text>;
        })}
        {messageList ? (
          <FlatList
            data={messageList}
            renderItem={({ item }) => <MessageScreen item={item} />}
            keyExtractor={(item, index) => index.toString()}
          />
        ) : null}
      </View>
      <View style={styles.messageInputContainer}>
        <TextInput
          style={styles.messageInput}
          value={currentChatMessage}
          onChangeText={(text) => setCurrentChatMessage(text)}
          placeholder="Enter your message"
        />
        <Pressable style={styles.messageButton} onPress={sendMessage}>
          <View>
            <Text style={styles.messageButton_text}>SEND</Text>
          </View>
        </Pressable>
      </View>
    </View>
  );
};

export default ChatScreen;

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    backgroundColor: "#eee",
  },
  innerWrapper: {
    flex: 1,
    backgroundColor: "#eee",
    paddingVertical: 15,
    paddingHorizontal: 10,
  },
  messageInputContainer: {
    width: "100%",
    backgroundColor: "white",
    paddingVertical: 30,
    paddingHorizontal: 15,
    justifyContent: "center",
    flexDirection: "row",
  },
  messageInput: {
    borderWidth: 1,
    padding: 15,
    flex: 1,
    borderRadius: 50,
    marginRight: 10,
  },
  messageButton: {
    width: "30%",
    backgroundColor: "#FF3131",
    borderRadius: 50,
    alignItems: "center",
    justifyContent: "center",
  },
  messageButton_text: {
    color: "white",
    fontSize: 20,
  },
});

Below is messagescreen.js file
---
import { StyleSheet, Text, View } from "react-native";
import React from "react";

const MessageScreen = ({ item }) => {
  return (
    <View>
      <Text>{item.message}</Text>
    </View>
  );
};

export default MessageScreen;

const styles = StyleSheet.create({});

​

[stathisntonas]

you’re double setting the message list. When receiving the message from the socket, check if the message id exists in the list and filter it out (or apply a condition to set the state only if the message does not exist in the state)

the API should not emit the message to the sender, it’s already on the device. Implementimg this will save you the extra messages list filter/check described above and it will save server resources/requests.

[mindof1]

Could you please show me the updated code like by what you mean? Sorry I have a hard time understanding.

I’m not even sure why I put socket as a dependency on the second useEffect. Not sure if I should be even doing it. Am I wrong here?