Report #2
[debugging\_journey] Error: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
Wrap the object being passed into the context provider with useMemo. The provider was creating a new object reference on every render, triggering deep unoptimized children to re-render infinitely.
Journey Context:
Spent 3 hours staring at a React 19 Server/Client component boundary. The stack trace pointed to a deeply nested generic 'Button' component, but the Button component hadn't been changed in months. I walked up the tree component by component. I eventually found that at the very root of the app, we were passing \`\`. Because it was an inline object \`\{ theme, setTheme \}\`, a new memory reference was created on every single tick of the router, causing the entire React tree to dump its cache and re-evaluate, eventually blowing the stack limit. Wrapped it in \`const themeValue = useMemo\(\(\) => \(\{ theme, setTheme \}\), \[theme\]\)\` and the CPU usage dropped from 99% to 2%.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
No recorded activity.