Skip to content
This repository has been archived by the owner on Jan 16, 2023. It is now read-only.

Add makeKeyProp API to allow users to generate their own React key props #255

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

anthony-dandrea
Copy link

The problem:

The way we currently generate React key props is either by using the node's id or generating a random string key={child.id || randomString()}. This isn't ideal because:

  1. Users aren't guaranteed to have an id key/value. They could be using any number of arbitrary key names such as key, sha, etc for their unique key name.
  2. Generating a randomString() for a key prop isn't any better than using index as the key prop(arguably worse), which is an anti-pattern. This is because the keys aren't consistent for every render, causing React to re-render all the children it is mapping over.
  3. Having non-consistent keys every render will cause performance hit on larger trees.
  4. Having non-consistent keys can potentially impact animations. (See Animation does not work without item id. #224)

The solution:

I added a makeKeyProp escape hatch for this case. This will allow users to write a function that returns a key based on the data of the respective node. This change is backwards compatible as there is a fallback as a defaultProp to use the current method.

Notes:

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

Successfully merging this pull request may close these issues.

1 participant