Open ofovweewere opened 2 weeks ago
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.
This issue is stale because it has been open for 7 days with no activity. Remove the stale label or add a comment, otherwise this issue will be closed in 7 days.
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