Skip to content

Improvement: Avoid using index as a key #332

@AndlerRL

Description

@AndlerRL
          **Avoid using index as a key in `LazyImage`.**

Using the index as a key can lead to performance issues and incorrect component state.

Consider using a unique identifier from the data as the key.

- key={`content-${image}-${index}`}
+ key={image.url}
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

                          key={image.url}
Tools
Biome

[error] 146-146: Avoid using the index of an array as key property in an element.

This is the source of the key value.

The order of the items may change, and this also affects performances and component state.
Check the React documentation.

(lint/suspicious/noArrayIndexKey)

Originally posted by @coderabbitai[bot] in #324 (comment)


Like this issue above, there are some other places that we set the key with index. We must work on those areas too and to add missing keys.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions