[Bug]: [Dropdown] Uncaught Error: Maximum update depth exceeded.

[nmgokhale]

Package

@carbon/react

Browser

Chrome

Package version

v1.68.0

React version

v18.2.0

Description

We started seeing error Uncaught Error: Maximum update depth exceeded. in our application when changing dropdown menu options. Following screen recording shows the error in our application -

Error.in.elyra.canvas.mov

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

we recently added this code -

<Dropdown
	itemToElement={this.renderItem}
	renderSelectedItem={this.renderItem}
/>

I am seeing renderItem() is called multiple times when I hover over dropdown menu options and also when I select new dropdown options.
Wondering if the error is caused due to so many calls to the renderItem() method?

Reproduction/example

https://stackblitz.com/edit/github-enf21q?file=src%2FApp.jsx

Steps to reproduce

• Go to https://stackblitz.com/edit/github-enf21q?file=src%2FApp.jsx
• Open browser console
• Change dropdown options
• renderItem method is called several times
  

Suggested Severity

Severity 1 = Must be fixed ASAP. The response must be swift. Someone from the team must drop all current work and be immediately reassigned to address the issue.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems