Fix React render loops and side effects in InputPrompt and AppContainer

[maximmasiutin]

Summary

Fixes #14660 - the recurring Cannot update a component ('InputPrompt') while rendering a different component ('AppContainer') error. This addresses critical UI instability caused by infinite render loops and side effects occurring during the render phase.

Details

1. InputPrompt.tsx: Replaces an unstable useEffect dependency (dirsChanged) with a stable deep comparison of the directory list. This implements the fix currently suggested in docs/troubleshooting.md directly into the codebase. The useEffect hook is refactored to use deep comparison for directory updates instead of an unstable dependency, effectively stopping infinite render loops.
2. AppContainer.tsx: Moves the config.setShellExecutionConfig() call out of the render body and into a useEffect hook. This prevents illegal state mutations during the render phase. The config.setShellExecutionConfig call is moved from the main render body into a useEffect hook to prevent illegal state mutations during rendering

Related Issues

Directly related (render loop/UI instability): #14678 [OPEN] (Infinite re-render loop warnings in Gemini CLI debug console - reports "severe infinite loop React state management bugs")

As such, the list of fixes is:

• Fixes Infinite re-render loop warnings in Gemini CLI debug console #14678 (open issue, infinite re-render loop)
• Fixes React render-phase update warning in gemini-cli (InputPrompt vs AppContainer) #14660 (open issue, exact same error)
• Fixes Cannot update a component (InputPrompt) while rendering a different component (AppContainer) #12149 (closed but same error)

Also fixes 14660, #13000, closes #12607.

How to Validate

1. Build: Run npm run build and start the CLI.
2. Resize: aggressively resize the terminal window (triggers AppContainer re-renders).
3. Context Change: Change the workspace directory or modify context.
4. Verify: Check the console/logs to ensure the error Cannot update a component... no longer appears.

Pre-Merge Checklist

• Updated relevant documentation and README (if needed)
• Added/updated tests (if needed)
• Noted breaking changes (if any)
• Validated on required platforms/methods:
  • MacOS
    • npm run
    • npx
    • Docker
    • Podman
    • Seatbelt
  • Windows
    • npm run
    • npx
    • Docker
  • Linux
    • npm run
    • npx
    • Docker

[gemini-code-assist]

Summary of Changes

Hello @maximmasiutin, 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 significantly enhances the stability of the application's user interface by resolving critical issues related to React render loops and side effects. It specifically targets and eliminates the "Cannot update a component while rendering a different component" error, which was leading to UI instability. The changes involve refactoring how state updates and side effects are managed within the InputPrompt and AppContainer components, ensuring that these operations occur in a controlled manner outside of the render phase.

Highlights

• UI Stability Improvement: Addresses critical UI instability by fixing recurring "Cannot update a component while rendering a different component" errors, which were caused by infinite render loops and side effects.
• InputPrompt Refactoring: The InputPrompt.tsx component now uses a stable deep comparison for directory list updates within its useEffect hook, preventing unstable dependencies from causing render loops.
• AppContainer State Management: The AppContainer.tsx component moves the config.setShellExecutionConfig() call into a useEffect hook, ensuring that state mutations occur outside the render phase and preventing illegal state updates.

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 correctly identifies and fixes critical React rendering issues. Moving the setShellExecutionConfig call into a useEffect in AppContainer.tsx is the right approach to prevent side effects during rendering. Similarly, the change in InputPrompt.tsx resolves an infinite render loop. I've included a suggestion for InputPrompt.tsx to make the fix more efficient and align with React best practices.

[jacob314]

If you would like to proceed with this pr let me know and I'll review after merge conflicts are resolved.

[gemini-cli]

Hi there! Thank you for your contribution to Gemini CLI. We really appreciate the time and effort you've put into this pull request.

To keep our backlog manageable and ensure we're focusing on current priorities, we are closing pull requests that haven't seen maintainer activity for 30 days. Currently, the team is prioritizing work associated with 🔒 maintainer only or help wanted issues.

If you believe this change is still critical, please feel free to comment with updated details. Otherwise, we encourage contributors to focus on open issues labeled as help wanted. Thank you for your understanding!