Pass whatever as key without re renders
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.
The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. When iterating over non simple values like promises or class instances, it can be tricky to find the right key for the items while keeping a consistent and predictable renders.
That's what react-smart-key solves.
$ yarn add react-smart-key
simple
It will keep a global key cache which will last as long as your app runs
import generateKey from 'react-smart-key';
const promise = Promise.resolve(1);
const foo = () => {};
generateKey(promise) === generateKey(promise) // true
generateKey(promise) === generateKey(Promise.resolve(1)) // false
generateKey(foo) === generateKey(foo) // true
generateKey(foo) === generateKey(() => {}) // falseFull
This example illustrates different kind of items and how it will always return the same key for each of them.
import generateKey from 'react-smart-key';
const items = [
() => {},
Promise.resolve('a'),
Promise.resolve(1),
new Date(),
function a() {},
1,
"2"
];
class App extends Component {
render() {
const list = items.map((item) => <li key={generateKey(item)} />);
return <ul>{list}</ul>
}
}locally
Sometimes, you want to have a per component unique cache. In this case, you can use generateLocalKey which encapsulates a local cache (this also helps garbage collection).
import {generateLocalKey} from 'react-smart-key';
class Component1 extends Component {
constructor() {
this.generateKey = generateLocalKey();
}
render() {
const list = [1,2,3].map((item) =>
<li key={this.generateKey(item)} />
);
return <ul>{list}</ul>
}
}
class Component2 extends Component {
constructor() {
this.generateKey = generateLocalKey();
}
render() {
const list = ['a', 'b'].map((item) =>
<li key={this.generateKey(item)} />
);
return <ul>{list}</ul>
}
}
class App extends Component {
render() {
return (
<div>
<Component1 />
<Component2 />
</div>
)
}
}@zzarcon 😜