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

发布说明

• 性能优化
  • 优化了容器更新机制：仅在目标容器实际变更时才更新状态，避免不必要的重复渲染，从而提升应用性能与稳定性。
  • 在容器来源变更时会正确重新执行更新，减少渲染级联问题，改善响应性。

[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 的副作用中改用函数式更新并加入比较逻辑：先通过 getContainer/customizeContainer 计算 nextContainer，仅在 nextContainer 与当前不同的情况下才调用 setInnerContainer，且将 getContainer 添加为 effect 依赖。

Changes

文件群组 / 文件(s)	变更摘要
Portal 状态更新守卫 src/Portal.tsx	将 effect 中对 innerContainer 的更新改为函数式更新：计算 nextContainer、与前值比较，仅在不同情况下才调用 setInnerContainer；新增 getContainer 为 effect 依赖，防止不必要的级联 re-render。

Sequence Diagram(s)

sequenceDiagram
    participant React as React Component
    participant Effect as useEffect
    participant Getter as getContainer / customizeContainer
    participant State as innerContainer state

    rect rgba(52,152,219,0.08)
    React->>Effect: render -> run effect
    end

    Effect->>Getter: 调用以计算 nextContainer
    Getter-->>Effect: 返回 nextContainer
    Note right of Effect: 计算 nextContainer（可能为 null）
    Effect->>State: 读取 prevContainer
    Note right of State: prevContainer = current state
    Effect->>Effect: 比较 nextContainer 与 prevContainer
    alt 不同
        Effect->>State: setInnerContainer(nextContainer)
        State-->>React: 触发 re-render
    else 相同
        Note over Effect,State: 跳过 setInnerContainer，避免 re-render
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5-15 分钟

• 需重点检查：
  • 比较逻辑对 null/undefined 的处理是否一致（自定义容器返回 null/undefined 情况）。
  • effect 依赖数组是否包含所有必要项（已添加 getContainer）。
  • 验证函数式更新中对旧值读取的正确性，避免竞态条件。

诗歌

兔子来贺妙手工，🐰
先算再比不匆忙，
若无差别不惊动，
渐消更新与回环，
Portal 宁静又轻盈。 ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the fix: preventing infinite re-renders (maximum updates) in Portal.tsx. It directly relates to the main change in the PR.
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: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 68d2716 and 49bbf25.

📒 Files selected for processing (1)

• src/Portal.tsx (1 hunks)

🔇 Additional comments (1)

src/Portal.tsx (1)

90-104: 正确修复了无限更新循环问题！

此实现完美解决了 "Maximum update depth exceeded" 错误：

1. 函数式更新：使用 setInnerContainer((prev) => {...}) 确保基于最新状态进行更新
2. 防护比较：if (prev === nextContainer) return prev 避免了当容器未实际改变时触发不必要的重新渲染
3. 依赖数组：[getContainer] 确保仅在 container provider 变化时重新运行 effect

这种模式符合 React 19 最佳实践，并正确实现了之前审查意见中的建议。

注意：如果 getContainer 是一个在父组件中未经 memoization 的函数，effect 仍会在每次渲染时执行（尽管比较逻辑会防止无限循环）。考虑在文档中建议使用者对函数类型的 getContainer 进行 memoization 以获得最佳性能。

---

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.