React warning should not be shown

Is it an issue related to Adaptive Cards?

No

Is this an accessibility issue?

No

What version of Web Chat are you using?

Development build

Which distribution are you using Web Chat from?

NPM

Which hosting environment does this issue primarily affect?

Others or unrelated

Which browsers and platforms do the issue happened?

Others or unrelated

Which area does this issue affect?

Development experience

Which theme pack does this issue affect?

I did not test it on other theme packs

What is the public URL for the website?

No response

Please describe the bug

When Web Chat is rendered with a development version of React, some warning message is being shown:

"Cannot update a component while rendering a different component."

This message should not be shown.

Do you see any errors in console log?

"Cannot update a component while rendering a different component."

How to reproduce the issue?

1. npm install botframework-webchat react@18
2. Render Web Chat

What do you expect?

No console warning/error.

What actually happened?

Console warning "Cannot update a component while rendering a different component" is shown.

Do you have any screenshots or recordings to repro the issue?

No response

Adaptive Card JSON

Additional context

Few places are setting state in render loop:

• <BasicToaster> is calling useLiveRegion() -> useQueueStaticElement() to announce something
  • useQueueStaticElement() is a state setter
• <BasicTranscript>: when it become sticky (when scroll from non-bottom to bottom), the render loop will call markAllAsAcknowlege()
  • useMarkAllAsAcknowledged() is a state setter
• <ScrollToEndButton>: when rendering the button and it's sticky (at bottom), the render loop will call mark all unread activity as read
  • useMarkActivityKeyAsRead() is a state setter

Reproduce the warning with npm install botframework-webchat react@18 and a development React build. Start by tracing the render paths for BasicToaster, BasicTranscript, and ScrollToEndButton, including useQueueStaticElement, useMarkAllAsAcknowledged, and useMarkActivityKeyAsRead. Done means rendering Web Chat no longer logs the warning.