# key-defender

> Manage keys in React/Vue applications.

Latest version **1.0.1-alpha.0** (published 2020-08-25) · Anti-996 license · 0 weekly downloads

## Install

```sh
npm install key-defender
pnpm add key-defender
yarn add key-defender
bun add key-defender
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1-alpha.0 |
| Published | 2020-08-25 |
| First published | 2019-05-20 |
| Weekly downloads | 0 |
| License | Anti-996 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | ouyang-chao |
| Maintainers | oyang |
| Keywords | key, list, key-defender |

## Links

- npm: https://www.npmjs.com/package/key-defender
- Repository: https://github.com/oychao/key-defender
- Homepage: https://github.com/oychao/key-defender#readme
- Issues: https://github.com/oychao/key-defender/issues
- npm.io page: https://npm.io/package/key-defender

## Recent versions

- 1.0.1-alpha.0 (latest) — 2020-08-25
- 1.0.0 — 2020-08-23
- 1.0.0-beta.0 — 2020-08-15
- 1.0.0-alpha.4 — 2019-08-01
- 1.0.0-alpha.3 — 2019-05-22
- 1.0.0-alpha.2 — 2019-05-20
- 1.0.0-alpha.1 — 2019-05-20

## README

# key-defender

[![Build Status](https://travis-ci.org/oychao/key-defender.svg?branch=master)](https://travis-ci.org/oychao/key-defender) [![996.icu](https://img.shields.io/badge/link-996.icu-red.svg)](https://996.icu)

## What and Why and How it works

In React and Vue applications when you don't have stable IDs for list items, you may use index as a key for identification, but there will be issues when it comes to components with state. Here is a React official post for an [in-depth explanation on the negative impacts of using an index as a key][1].

It is recommended to use an ID or email or something unique as a key for each item, but sometimes, we just don't have it. Of course we can generate some unique IDs, meanwhile your data schema will be changed.

What if we manage all keys somewhere else, like in a Map which uses list item (i.e. an object) as a key?

## How to use

```bash
npm install --save key-defender
```

```jsx
// some React Component
import k from 'key-defender';

// ...
<ul>
  {list.map(item => (
    <Row key={k(item)} title={item.title} />
  ))}
</ul>;
// ...
```

## Caveats

You should always use an object as a parameter in key-defender, for only objects are unique regardless of their values are equal or not, so we can tell a difference in a Map.

```javascript
'abcd' === 'abcd' // true
{ title: 'abcd' } === { title: 'abcd' } // false
```

If you are handling a list with basic typed values, decorate it before using key-defender.

```javascript
['foo', 'foo', 'bar', 'bar'][('foo', 'foo', 'bar', 'bar')] // origin list
  .map(_ => ({ val: _ })); // decorated list
```

## License

[![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg)](https://github.com/996icu/996.ICU/blob/master/LICENSE)

[1]: https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

---
_Source: https://npm.io/package/key-defender · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._