[ComboBox]: onInputChange is called on every render, even if input value did not change, causing infinite render loop

[nertzy]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

My application uses the ComboBox component, and updates the items array based on the input given by the onInputChange callback prop. My application also fully controls rendering via calls to render from react-dom. When we render based on an input change, we enter an infinite loop.

Is this issue related to a specific component?

Yes, ComboBox, and potentially others changed in a similar way.

What did you expect to happen? What happened instead? What would you like to
see changed?

This use of setEffect does not properly follow the Rules of Hooks. Since useEffect will get called on every render, calling the onInputChange callback sets up an infinite loop if the callback itself triggers another render. This pattern is common for fully-controlled applications that need to re-render to update the items that are available to the combo box after user input.

carbon/packages/react/src/components/ComboBox/ComboBox.js

Lines 149 to 153 in a067cfc

	useEffect(() => {
	if (onInputChange) {
	onInputChange(inputValue);
	}
	});

Instead, the input value should be added into the second argument of useEffect to prevent extraneous calls.

It may be a good idea to run eslint-plugin-react-hooks as part of the Carbon build to catch problems like this in the future.

What browser are you working in?

• macOS Big Sur x86
• Chrome Version 89.0.4389.114 (Official Build) (x86_64)
• Firefox Developer Edition 88.0b7 (64-bit)

What version of the Carbon Design System are you using?

Problem introduced in 10.24.0, not present in 10.23.0.

Introduced by 635e0cb as part of #7768.

Steps to reproduce the issue

1. Call render in an onInputChange callback passed to a ComboBox React component.
2. Change the input value.
3. (infinite loop)

See https://codesandbox.io/s/interesting-feather-1s5kk?file=/src/index.js for a reproduction.

Note that I added a setTimeout to the render call in my example to prevent the infinite loop from blocking the thread, which would break CodeSandbox.

[nmgokhale]

@emyarod Is there any update on this issue? We can't upgrade carbon version until this issue is fixed. Thanks.