fix: maximum updates Portal.tsx

[James-Jager]

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)

Summary by CodeRabbit

• 性能优化
  • 调整容器更新策略：即便目标容器值相同也会触发一次更新，确保在容器来源变化时能正确重新应用并避免遗漏刷新，提升可靠性与响应性。
  • 保留自定义容器行为，未更改任何对外公开接口或导出签名。

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

将 Portal 中对 innerContainer 的状态更新改为函数式更新器：用 setInnerContainer(() => customizeContainer ?? null) 替代直接赋值，以便在需要时强制触发 React 状态更新；公开签名未变更。

Changes

文件群组 / 文件(s)	变更摘要
Portal 状态更新 src/Portal.tsx	将对 innerContainer 的更新改为函数式更新器：setInnerContainer(() => customizeContainer ?? null)（用函数包裹返回值以强制触发状态更新即使值相同）；未修改导出签名。

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

诗歌

兔子说道喜更新，🐇
函数包裹暖如春，
值若相同仍可唤，
渲染稳又不纷纷，
小改细活心情真。

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	标题「fix: maximum updates Portal.tsx」虽然提到了主要修改文件Portal.tsx，但表述不够清晰准确。「maximum updates」是对问题现象的描述，而非对修复内容的具体说明，使得标题显得模糊且不够专业。	建议改进标题以更准确地反映修复内容，例如「fix: use functional updater to prevent infinite state updates in Portal」或「fix: prevent maximum update depth exceeded in Portal」，使其更清晰地传达问题和解决方案。

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 01ecf19 and 9c4a0a4.

📒 Files selected for processing (1)

• src/Portal.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/Portal.tsx

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Summary of Changes

Hello @James-Jager, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request resolves a critical React error, 'Maximum update depth exceeded,' by refining the state management within the Portal component. The change specifically targets the setInnerContainer function, implementing a conditional update mechanism. This ensures that the component only re-renders when there's a genuine change in the container reference, preventing an infinite update cycle and enhancing the stability and performance of the Portal component.

Highlights

• Fixes React Error: Addresses the 'Maximum update depth exceeded' error that can occur in React applications due to cascading state updates.
• Optimized State Update: The setInnerContainer call within the Portal component's useEffect hook has been refactored to use a functional update.
• Conditional Update Logic: Introduces a check to prevent unnecessary state updates by ensuring setInnerContainer only triggers a re-render when the target container actually changes, thus avoiding infinite loops.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request fixes a 'Maximum update depth exceeded' error in the Portal component by preventing unnecessary state updates. The change is correct and resolves the immediate issue. My review points out that the underlying cause is a useEffect hook missing a dependency array, which causes it to run on every render. I've suggested adding the dependency to improve efficiency and prevent similar issues in the future.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.28%. Comparing base (5e2c848) to head (9c4a0a4).
⚠️ Report is 8 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master      #29      +/-   ##
==========================================
+ Coverage   93.27%   94.28%   +1.00%     
==========================================
  Files           6        7       +1     
  Lines         119      140      +21     
  Branches       44       48       +4     
==========================================
+ Hits          111      132      +21     
  Misses          8        8              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull Request Overview

This PR addresses a "Maximum update depth exceeded" error in the Portal component by preventing unnecessary state updates when the container hasn't changed. The fix introduces a comparison check using a functional state update and adds a dependency array to the useEffect hook.

Key Changes

• Modified setInnerContainer to use a functional update with a comparison check to avoid cascading updates
• Added dependency array [getContainer] to ensure the effect re-runs when the container source changes
• Prevents infinite update loops by returning the previous state when the container is unchanged

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull Request Overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[James-Jager]

Anything else you would like me to do?

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[zombieJ]

wait, this may be break the closure:

const getContainer = useCallback(() => myRef.current)

[James-Jager]

Good catch didn't even think about this. Letting it run on every render is safe now because of the prev === nextContainer preventing unnecessary updates.

[James-Jager]

Do you think we should also change from useEffect to useLayoutEffect to run synchronously after DOM mutations?

[zombieJ]

I approve the PR, but I think just return in function call is enough.
This bug is cased by render not merge in the batch that make react repeat trigger setState even the value is same, and function call will force do the compare. Just let me handle the modify to avoid we've conflict.