Append causing multiple rendering in useEffect

[josuasimatupang]

Hi everyone! I'm new here and need help how to solve this issue. I'm trying to append message in useEffect while searchCommandPalette is updated and the current useEffect implementation causes multiple renders and duplicate streaming responses with different answers. The searchCommandPalette is the value of the input of Command Palette. Any solution how to approach this better? Thank you!

Snippet code useEffect:

useEffect(() => {
    if (!searchCommandPalette) return;

    let isMounted = true;

    const handleAppend = async () => {
      if (isMounted) {
        try {
          await append({
            role: 'user',
            content: searchCommandPalette,
          });
          if (isMounted) {
            dispatch(setSearchCommandPalette(null));
          }
        } catch (error) {
          console.error('Error appending message:', error);
        }
      }
    };

    handleAppend();

    return () => {
      isMounted = false;
    };
  }, [searchCommandPalette, append, dispatch]);

Full code:

const AutobotFullScreenContent = () => {
  const [updateMessage, setUpdateMessage] = useState(null);
  const formRef = useRef<HTMLFormElement>(null);

  const {
    autobotParameter,
    credentials,
    inputChatRef,
    selectedTab,
    dispatch,
    handleHistoryUpdate,
    isNewChat,
    searchCommandPalette,
  } = useSubmitMessage();

  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    isLoading,
    append,
    setMessages,
    reload,
  } = useChat({
    body: { autobotParameter, credentials },
    onFinish: (message: any) => {
      dispatch(setChatSuggestionsList(message.annotations[0].questions));
      setUpdateMessage(message);
    },
    onError: (e) => {
      console.error(e);
      toast.error(e.message);
    },
    generateId: () => uuidv4(),
    sendExtraMessageFields: true,
    experimental_throttle: 50,
  });

  useEffect(() => {
    if (!searchCommandPalette) return;

    let isMounted = true;

    const handleAppend = async () => {
      if (isMounted) {
        try {
          await append({
            role: 'user',
            content: searchCommandPalette,
          });
          if (isMounted) {
            dispatch(setSearchCommandPalette(null));
          }
        } catch (error) {
          console.error('Error appending message:', error);
        }
      }
    };

    handleAppend();

    return () => {
      isMounted = false;
    };
  }, [searchCommandPalette, append, dispatch]);

  useEffect(() => {
    if (!isNewChat) return;
    setMessages([]);
  }, [isNewChat]);

  useEffect(() => {
    if (!updateMessage) return;

    const updateChat = async () => {
      try {
        // Remove last message and add updated message
        const updatedMessages = messages.slice(0, -1);
        const newMessages = [...updatedMessages, updateMessage];
        await handleHistoryUpdate(newMessages);
      } catch (error) {
        toast.error(error.message);
        console.error(error.message);
      } finally {
        setUpdateMessage(null);
        dispatch(setIsReloadChat(false));
        dispatch(setIsNewChat(false));
      }
    };
    updateChat();

    const controller = new AbortController();
    return () => controller.abort();
  }, [updateMessage]);

  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!messages.length) {
      await new Promise((resolve) => setTimeout(resolve, 300));
    }

    dispatch(setChatSuggestionsList(null));
    handleSubmit(e);
    inputChatRef.current?.focus();
  };

  return (
    <AutobotContent
      input={input}
      messages={messages}
      handleInputChange={handleInputChange}
      append={append}
      onSubmit={onSubmit}
      setMessages={setMessages}
      inputChatRef={inputChatRef}
      chatEndpointIsLoading={isLoading}
      reload={reload}
      selectedTab={selectedTab}
      formRef={formRef}
    />
  );
};