React: mutating stream data unnecessarily causes other functions being recreated even though they are enclosed by useCallback

[tonyfarney]

Description

In use-chat.ts:

...
onUpdate(merged, data) {
  mutate([...chatRequest.messages, ...merged], false);
  mutateStreamData([...(existingData || []), ...data], false);
},
...

data is an empty array in my use case and it is causing streamData being modified. As it is a dependency for triggerRequest and triggerRequest is a dependency for append, reload and handleSubmit, useCallback returns a new function every time an update occurs when reading from the stream.

A simple modification avoids this behavior (and consequently unnecessary re-renders):

... 
onUpdate(merged, data) {
  mutate([...chatRequest.messages, ...merged], false);
  if (data?.length) {
    mutateStreamData([...(existingData || []), ...data], false);
  }
},
...

Code example

No response

Additional context

No response