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.
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.
Enter the URL of a public GitHub repository