react-treebeard
react-treebeard copied to clipboard
Add makeKeyProp API to allow users to generate their own React key props
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:
- Users aren't guaranteed to have an
idkey/value. They could be using any number of arbitrary key names such askey,sha, etc for their unique key name. - 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. - Having non-consistent keys every render will cause performance hit on larger trees.
- Having non-consistent keys can potentially impact animations. (See https://github.com/storybookjs/react-treebeard/issues/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:
- Also helps users address this issue: https://github.com/storybookjs/react-treebeard/issues/224
- Fixed unrelated failing test in
__tests__/Container.test.js