From 68d27163a448afdfe0df0e783744c30a9a54459a Mon Sep 17 00:00:00 2001 From: James-Jager Date: Mon, 10 Nov 2025 14:57:59 -0500 Subject: [PATCH 1/4] Update Portal.tsx Fix for the following error: error-boundary-callbacks.ts:80 Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. at getRootForUpdatedFiber (react-dom-client.development.js:3860:11) at enqueueConcurrentHookUpdate (react-dom-client.development.js:3820:14) at dispatchSetStateInternal (react-dom-client.development.js:8121:18) at dispatchSetState (react-dom-client.development.js:8081:7) at Portal.useEffect (Portal.js:63:5) --- src/Portal.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/Portal.tsx b/src/Portal.tsx index 3678b74..dd87a15 100644 --- a/src/Portal.tsx +++ b/src/Portal.tsx @@ -91,7 +91,16 @@ const Portal = React.forwardRef((props, ref) => { const customizeContainer = getPortalContainer(getContainer); // Tell component that we check this in effect which is safe to be `null` - setInnerContainer(customizeContainer ?? null); + setInnerContainer((prev) => { + const nextContainer = customizeContainer ?? null; + + // Avoid cascading updates when the target container is unchanged + if (prev === nextContainer) { + return prev; + } + + return nextContainer; + }); }); const [defaultContainer, queueCreate] = useDom( From 49bbf2521cec35c98843648f3223c2b3cd6ad8d4 Mon Sep 17 00:00:00 2001 From: James-Jager Date: Mon, 10 Nov 2025 15:05:06 -0500 Subject: [PATCH 2/4] Update Portal.tsx Missed dependency --- src/Portal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Portal.tsx b/src/Portal.tsx index dd87a15..2a2a9ec 100644 --- a/src/Portal.tsx +++ b/src/Portal.tsx @@ -101,7 +101,7 @@ const Portal = React.forwardRef((props, ref) => { return nextContainer; }); - }); + }, [getContainer]); const [defaultContainer, queueCreate] = useDom( mergedRender && !innerContainer, From 01ecf195d0f827c95621c695f3ab31829ff97d67 Mon Sep 17 00:00:00 2001 From: James-Jager Date: Thu, 25 Dec 2025 09:10:38 -0500 Subject: [PATCH 3/4] Update Portal.tsx If getContainer is a stable useCallback(() => myRef.current), the effect won't re-run when myRef.current changes because the function reference stays the same. --- src/Portal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Portal.tsx b/src/Portal.tsx index 2a2a9ec..dd87a15 100644 --- a/src/Portal.tsx +++ b/src/Portal.tsx @@ -101,7 +101,7 @@ const Portal = React.forwardRef((props, ref) => { return nextContainer; }); - }, [getContainer]); + }); const [defaultContainer, queueCreate] = useDom( mergedRender && !innerContainer, From 9c4a0a4a103f94fb5dc3f5b8a7e89ad159b1943a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 25 Dec 2025 23:05:53 +0800 Subject: [PATCH 4/4] chore: adjust --- src/Portal.tsx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/src/Portal.tsx b/src/Portal.tsx index dd87a15..a04905a 100644 --- a/src/Portal.tsx +++ b/src/Portal.tsx @@ -91,16 +91,12 @@ const Portal = React.forwardRef((props, ref) => { const customizeContainer = getPortalContainer(getContainer); // Tell component that we check this in effect which is safe to be `null` - setInnerContainer((prev) => { - const nextContainer = customizeContainer ?? null; - - // Avoid cascading updates when the target container is unchanged - if (prev === nextContainer) { - return prev; - } - - return nextContainer; - }); + setInnerContainer( + () => + // React do the state update even the value is the same, + // Use function call to force React to compare update + customizeContainer ?? null, + ); }); const [defaultContainer, queueCreate] = useDom(