react strict mode and useChat

[vv1n3k]

Description

React strict mode causes the useChat to initialize twice and when I try to start conversation in useEffect - eg. based on provided initial message from props, sendMessage calls API twice and apparently this cause very strange side effects like two opened streams. I tried to stop the first stream in useEffect when the component is unmounting but it's not working. Any idea how this should be handled? It's obviously only in development. I temporarily , switch off strict mode, but it's not the option in the long run

AI SDK Version

"@ai-sdk/openai": "2.0.0",
"@ai-sdk/provider": "^2.0.0",
"@ai-sdk/provider-utils": "^3.0.1",
"@ai-sdk/react": "^2.0.1",
"ai": "^5.0.0",
"react": "^19.0.0",
"next": "15.3.5",

[imranbarbhuiya]

and when I try to start conversation in useEffect - eg. based on provided initial message from props, sendMessage calls API twice and apparently this cause very strange side effects like two opened streams.

That's expected behaviour for react strict mode right? you can add an useRef to track if sent once and then dont send again

[0xRezaa]

That's the whole purpose of strict mode.

I tried to stop the first stream in useEffect when the component is unmounting but it's not working. Any idea how this should be handled?
This is exactly what you need to manage. You are guaranteed:

• call of effect
• call of cleanup
• second call of effect

To me it seems like you better want to close the stream properly