[Bug]: firefox is slow bug by the lodash.isEqual in DataTable with react component children in rows.

[yaoterry]

Package

@carbon/react

Browser

Firefox

Package version

v1.60.3

React version

v17.0.2

Description

We create a the with various cell data with the react component, and we found in firefox, sometimes the firefox will be slow because DataTable is calling lodash.isEqual like: https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/DataTable/DataTable.tsx#L426, and after we added some dump console.log statement, it will tell us:
after isEqual(nextProps.rows, this.props.rows), it is elapsed for 150652 milli-seconds

it's not always there, but it looks firefox will protect itself if firefox javascript engine call stack size exceed some threshold count. Our component has some redux dispatch calls and it will notify the react to re-render the component, and mostly it happens intermittent and we do not find this issue in chrome.

From facebook/react#19811, we should not use Lodash.isEqual to compare the object might contain react component, there are couple of replacement like fast-deep-equal or react-fast-compare package is doing better than Loash.isEqual.

Reproduction/example

it's a little bit hard to reproduce in a simple app

Steps to reproduce

Create a component with with rows containing react component, and move away from the react route for the component and move back to this component, this component will be mount/unmount for a couple of times.

then the firefox will be freezing and prompt to stop or debug script..

Add some debug code around https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/DataTable/DataTable.tsx#L426 like:
const beforeCompare = Date.now();
if (!isEqual(nextProps.rows, this.props.rows)) {
const elapsed = Date.now() - beforeCompare;
console.log(after isEqual(nextProps.rows, this.props.rows), it is elapsed for ${elapsed} milli-seconds);

then it will print in debug console:
after isEqual(nextProps.rows, this.props.rows), it is elapsed for 150652 milli-seconds

it's not always there, and only happens in firefox.

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

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

[yaoterry]

fast-deep-equal is not good, our page will be crash with error: `React Router caught the following error during render InternalError: too much recursion
equal index.js:8'
I replace it with react-fast-compare then this issue is fixed.

[riddhybansal]

Here is the slack conversation https://ibm-studios.slack.com/archives/C2K6RFJ1G/p1721728109247739 that might help.