Back to all reviewers

Ensure proper React keys

kilo-org/kilocode
Based on 2 comments
TSX

Always provide meaningful keys for React components and fragments to ensure proper rendering and re-rendering behavior. Use composite keys when component identity depends on multiple values, and include keys even for Fragment components when rendering lists.

React TSX

Reviewer Prompt

Always provide meaningful keys for React components and fragments to ensure proper rendering and re-rendering behavior. Use composite keys when component identity depends on multiple values, and include keys even for Fragment components when rendering lists.

For components that need to re-render based on multiple state changes, create composite keys:

<MarketplaceInstallModal
    key={`install-modal-${item.id}-${installModalVersion}`}
    // other props
/>

For Fragment components in lists, always include a key prop:

{PROVIDERS.map(({ value, label }, i) => (
    <Fragment key={value}>
        <SelectItem value={value}>
            {label}
        </SelectItem>
    </Fragment>
))}

This prevents React from incorrectly reusing components and ensures predictable rendering behavior, especially when component state or props change frequently.

2
Comments Analyzed
TSX
Primary Language
React
Category

Source Discussions