PageHeader error: Error Maximum update depth exceeded when rendering the PageHeader

[ofovweewere]

Package

Carbon for IBM Products

Description

In Next.js 13 and later, when using a loading page by adding loading.js to src/app/loading and export default observer(MyComponent) for a component (where observer is a MobX observer), an error occurs if MyComponent has a PageHeader child.

Note that the error dissappears if we delete src/app/loading

Finally, it doesn't matter whether loading.js returns some content or just returns null; the bug still occurs as long as there is a loading file present.

Component(s) impacted

PageHeader

Browser

Chrome, Safari, Firefox, Microsoft Edge

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

2.11.2

Suggested Severity

Severity 1 = The design is broken in a critical way that blocks users from completing tasks or damages the brand. Affects major functionality, no workaround.

Product/offering

An AI product

CodeSandbox or Stackblitz example

https://stackblitz.com/edit/nextjs-y2tf9z?file=app%2Flayout.tsx,app%2Floading.tsx,app%2Fpage.tsx,views%2Fheader%2FHeader.js,package.json,next.config.js,app%2Fglobals.css

Steps to reproduce the issue (if applicable)

The steps can be seen in the Stackblitz example

Release date (if applicable)

No response

Code of Conduct

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

[amal-k-joy]

Looks like the issue will resolve when we define the breadcrumbs array outside the Header component or pass as prop from page component. The breadcrumbs array may get recreated every time when the component re-renders which in-turn will re-render the Pageheader which leads to infinite re-render since we are listening to breadcrumbs array changes.