aws / aws/amazon-chime-sdk-component-library-react
addVoiceFocus recreates reference on empty device string causing infinite rerender when calling inside passive effect
- Dominant language
- TypeScript
- Stars
- 281
- Forks
- 166
- PR merge metrics
- No merged PRs in 30d
Description
### What happened and what did you expect to happen?
If the device passed to `addVoiceFocus` is an empty string, the function still calls:
```js
const vf = await transformer?.createTransformDevice(device);
if (vf) {
logger.info('Created a new Amazon Voice Focus transform device.');
setVoiceFocusDevice(vf);
return vf;
}
```
This causes `vf` to be created and subsequently `setVoiceFocusDevice(vf)` is invoked, which leads to a new reference for `addVoiceFocus` on every render.
If addVoiceFocus is called inside an effect and included as a dependency, this results in an infinite rerender.
https://github.com/user-attachments/assets/a73a5307-2f27-4656-b182-3be1fe326bbf
**Recommendation:**
- Add an early exit: don’t call transform if device is empty.
- Memoize addVoiceFocus so its reference remains stable when device doesn’t change.
### Have you reviewed our existing documentation?
- [x] Amazon Chime SDK for JavaScript GitHub [issues](https://github.com/aws/amazon-chime-sdk-js/issues)
- [x] Amazon Chime SDK React Components Library GitHub [issues](https://github.com/aws/amazon-chime-sdk-component-library-react/issues)
- [x] Storybook [documentation](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/story/introduction--page)
- [x] README [page](https://github.com/aws/amazon-chime-sdk-component-library-react#readme)
- [x] React SDK meeting [demo](https://github.com/aws-samples/amazon-chime-sdk/tree/main/apps/meeting#readme---react-meeting-demo)
### Reproduction steps
Steps to Reproduce:
- Call `addVoiceFocus` with an empty string as the device.
- Observe that `createTransformDevice` is invoked.
- Include `addVoiceFocus` in a React effect dependency array.
- Notice infinite rerendering.
### Amazon Chime SDK React Components Library version
^3.11.0
### What browsers are you seeing the problem on?
Chrome dev, comet
### Browser version
Version 143.0.7475.7
### Device Information
MacBook Pro; 14.1 (23B74)
### Meeting and Attendee ID Information.
_No response_
### Browser console logs
ConsoleLogger.js:79 2025-10-20T10:23:57.861Z [INFO] ChimeSDKReactComponent - Created a new Amazon Voice Focus transform device.
ConsoleLogger.js:79 2025-10-20T10:23:58.083Z [INFO] ChimeSDKReactComponent - Created a new Amazon Voice Focus transform device.
ConsoleLogger.js:79 2025-10-20T10:23:58.339Z [INFO] ChimeSDKReactComponent - Created a new Amazon Voice Focus transform device.
ConsoleLogger.js:79 2025-10-20T10:23:58.879Z [INFO] ChimeSDKReactComponent - Created a new Amazon Voice Focus transform device.
ConsoleLogger.js:79 2025-10-20T10:23:59.029Z [INFO] ChimeSDKReactComponent - Created a new Amazon Voice Focus transform device.
### Add any other context about the problem here.
_No response_
Contributor guide
Research direction
Start at the addVoiceFocus implementation and reproduce the empty-string case described in the issue, including calling it from an effect dependency array. The fix is done when an empty device does not create a transform device and addVoiceFocus does not change reference solely because the device remains unchanged, eliminating the infinite rerender.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100