Skip to content

fix (AgentFlow) - generate ArrayInput item keys synchronously to prevent missing React keys#6001

Merged
j-sanaa merged 4 commits intomainfrom
fix/agentflow-asyncinput-render-bug
Mar 17, 2026
Merged

fix (AgentFlow) - generate ArrayInput item keys synchronously to prevent missing React keys#6001
j-sanaa merged 4 commits intomainfrom
fix/agentflow-asyncinput-render-bug

Conversation

@j-sanaa
Copy link
Copy Markdown
Contributor

@j-sanaa j-sanaa commented Mar 17, 2026

Moved key generation from useEffect to render body in ArrayInput, matching the existing pattern in MessagesInput. The effect ran after paint, so newly added items rendered with key={undefined} on their first frame.

aync.rendering.post.fix.mov

@j-sanaa j-sanaa requested a review from jocelynlin-wd March 17, 2026 19:19
@gemini-code-assist
Copy link
Copy Markdown
Contributor

gemini-code-assist bot commented Mar 17, 2026

Summary of Changes

Hello, I'm Gemini Code Assist1! 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 rendering issue within the ArrayInput component by refactoring how item keys are generated. By moving the key generation process to occur synchronously during rendering, it ensures that all items, especially newly added ones, have valid React keys from their initial render, preventing potential UI glitches or warnings related to undefined keys.

Highlights

  • Synchronous Key Generation: Moved the item key generation logic in ArrayInput from a useEffect hook to the component's render body. This ensures keys are generated synchronously.
  • Resolved React Key Warning: This change addresses an issue where newly added items in ArrayInput would initially render with key={undefined} because the key generation in useEffect ran after the initial paint.
  • Code Simplification: Removed the useEffect import and the useEffect hook itself, simplifying the component's logic related to key management.
Changelog
  • packages/agentflow/src/atoms/ArrayInput.tsx
    • Removed useEffect import.
    • Relocated item key generation logic from a useEffect hook to the component's render function.
    • Updated comments to reflect synchronous key generation.
Activity
  • The author, j-sanaa, created this pull request to fix a React key generation issue in the ArrayInput component.
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[bot]
gemini-code-assist bot reviewed Mar 17, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

The pull request fixes a bug where React keys were missing for newly added items in ArrayInput by generating them synchronously during render. This correctly solves the issue. However, the implementation mutates refs during the render cycle, which is a side effect and considered a React anti-pattern. I've added a comment highlighting the potential maintainability issues with this approach.

@j-sanaa j-sanaa merged commit e39b9ff into main Mar 17, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jocelynlin-wd jocelynlin-wd jocelynlin-wd approved these changes

+1 more reviewer

@gemini-code-assist gemini-code-assist[bot] gemini-code-assist[bot] left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@j-sanaa @jocelynlin-wd