Блог

Приведенный ниже код работает, но если я все чаще и чаще нажимаю на кнопку, приложение зависает, и обновление происходит с задержкой. Эта задержка значительно увеличивается после каждого нажатия кнопки.

Как я могу избежать этой задержки/заморозки?

 const ContactChatScreen = ({navigation}) => {
  const mySocket = useContext(SocketContext);
  const [chatMsgs, setChatMsgs] = useState([]);

  const sendMsg = () => {
    mySocket.emit('chat msg', 'test');
  };

  useEffect(() => {
    mySocket.on('chat msg', (msg) => {
      setChatMsgs([...chatMsgs, msg]);
    });
  });

  return (
    <View style={styles.container}>
      <StatusBar
        backgroundColor={Constants.SECONDN_BACKGROUNDCOLOR}
        barStyle="light-content"
      />
      {chatMsgs.length > 0
        ? chatMsgs.map((e, k) => <Text key={k}>{e}</Text>)
        : null}
      <Text style={styles.text}>Contact Chat Screen</Text>
      <MyButton title="test" onPress={() => sendMsg()} />
    </View>
  );
 

Я смог это исправить, изменив это:

 useEffect(() => {
    mySocket.on('chat msg', (msg) => {
      setChatMsgs([...chatMsgs, msg]);
    });
    return () => {
      // before the component is destroyed
      // unbind all event handlers used in this component
      mySocket.off('chat msg');
    };
  }, [chatMsgs]);
 

добавление mySocket.off было ключевым моментом.