useChat's `messages` does not trigger an update as a dependency in a useCallback, which is called inside of onFinish(...)

[davit-b]

Simply put

const {
    messages,
    setMessages,
    input,
    setInput,
    append
  } = useChat({
    onFinish: (message) => {
      pushToLocalStateAndReset()
    }
  })

  const pushToLocalStateAndReset = useCallback(() => {
    console.log({
      msg: 'pushToLocalStateAndReset',
      messages: messages,
    })
  }, [messages])

On the first chat will output

Even though there is data within the messages[] array as it's render on the screen.

The problem

It's likely one of two things

1. I'm using useCallback incorrectly because of my lack of experience with React.
2. Something about the way that SWR implements messages and it's mutate(...) function doesn't work like if messages was simply stored inside of useState for warning dependency that an update has occured.

See

ai/packages/core/react/use-chat.ts

Line 352 in f81de39

const { data: messages, mutate } = useSWR<Message[]>([api, chatId], null, {

  // Store the chat state in SWR, using the chatId as the key to share states.
  const { data: messages, mutate } = useSWR<Message[]>([api, chatId], null, {
    fallbackData: initialMessages,
  });

[davit-b]

Or maybe, it has to do entirely with the onFinish helper being instantiated once as an input into const {...} = useChat({...}) and therefore that callback doesn't update?

[davit-b]

I discovered a work around to get onFinish to trigger a side effect.

const [triggerCopyToLocalState, setTriggerCopyToLocalState] = useState(false)

const {
    messages,
    ...
  } = useChat({
    onFinish: (message) => {
      // ~~pushToLocalStateAndReset()~~
      // Cannot call a callback from here, have to update some local state and have that useEffect to call a callback.
      setTriggerCopyToLocalState(true)
    },
  })

  const pushToLocalStateAndReset = useCallback(() => {
    ...
  }, [tempMessages, messagesToRender])

  useEffect(() => {
    if (triggerCopyToLocalState) {
      pushToLocalStateAndReset()
      setTriggerCopyToLocalState(false)
    }
  }, [triggerCopyToLocalState, pushToLocalStateAndReset])

This actually works.

But it would save a lot of headache to be able to call a up-to-date callback from the useFinish(...) handler.

[davit-b]

A helpful todo would be

• Add documentation to the onFinish callback is memoized at the time of initialization of the useChat(...) and it doesn't update as a user may expect it to update.

[MaxLeiter]

onFinish provides the message: onFinish: (message) => {}. The next render pass will have an updated messages. A PR calling this out in the docs would be great!