aws / aws/amazon-chime-sdk-component-library-react

addVoiceFocus recreates reference on empty device string causing infinite rerender when calling inside passive effect

Open
#1,006 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.