Pass anything as key without re-renders
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
__tests__ Add tests + improve Readme Oct 19, 2018
custom-typings Initial commit Oct 14, 2018
example Add tests + improve Readme Oct 19, 2018
src Docs + generateLocalKey Oct 29, 2018
.gitignore 0.0.2 Oct 14, 2018
.nvmrc Initial commit Oct 14, 2018
.travis.yml Initial commit Oct 14, 2018
LICENSE Initial commit Oct 8, 2018
README.md Fix Readme Oct 29, 2018
package.json 1.0.2 Oct 29, 2018
tsconfig.json Initial commit Oct 14, 2018
yarn.lock Initial commit Oct 14, 2018

README.md

react-smart-key Build Status

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.

Install

$ yarn add react-smart-key

Usage

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(() => {}) // false

Full

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>
    )
  }
}

Author

@zzarcon 😜