react-auto-keys

Automatically assign React keys when mapping arrays to JSX.

Installation

npm install react-auto-keys

Quick Start

import { autoKeys } from 'react-auto-keys';

// Before: manually adding keys
users.map(user => <UserCard key={user.id} user={user} />)

// After: keys assigned automatically
autoKeys(users, user => <UserCard user={user} />)

How Keys Are Generated

By default (keyStrategy: 'auto'):

1. Checks for id, key, uuid, or _id properties
2. Falls back to stable object reference (WeakMap)

Other strategies:

• property - Only id properties, falls back to index
• reference - Always use object reference
• content - Hash object content (DJB2)

autoKeys(items, renderFn, { keyStrategy: 'content' })

Custom Key Extractor

autoKeys(users, user => <UserCard user={user} />, {
  keyExtractor: user => `user-${user.id}`
})

Performance

| Strategy | Speed | Notes | |----------|-------|-------| | auto (default) | Fast | O(1) WeakMap lookup after property check | | reference | Fastest | O(1) WeakMap lookup | | property | Fast | Simple property access | | content | Slow | Uses JSON.stringify - avoid for large objects |

API

| Export | Description | |--------|-------------| | autoKeys(array, renderFn, options?) | Core mapping function | | KeyedFragment | Declarative component: <KeyedFragment items={...} renderItem={...} /> |

Options: keyExtractor, keyStrategy, debug

License

MIT