[WIP] Fix set state in render loop

[compulim]

Fixes #5598.

Changelog Entry

Fixed

• Fixed #5598. Console should not display warning related to "Cannot update a component while rendering a different component", in PR #5597, by @compulim

Description

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

Design

Instead of using useMemo() to call some state setting hooks, we should use useEffect() instead.

Specific Changes

• Updated <BasicToaster>, <BasicTranscript>, <ScrollToEndButton>, and useLiveRegion() to use useEffect() to call the useLiveRegion() callback function
• Added keepNames: true to esbuild for better debuggability
• Added otherCDN.skip.html to quickly try out ESM behaviors from other CDNs

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)