---
source: https://iinventedlight.com/library/notes/react-rendering-lists.md
title: "Rendering lists and keys in React"
license: CC-BY-4.0
license_url: https://creativecommons.org/licenses/by/4.0/
source_license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS); prose restates or closely paraphrases cited source lines"
license_family: react-docs-ccby
rule_check: "needs rule check (family not in auto-publish rule; check.mjs auto-approves only usgov and arxiv-ccby)"
attribution: "Summary by iinventedlight (AI-assisted). Sources: React docs (react.dev), Rendering Lists – React, CC BY 4.0 (reactjs/react.dev LICENSE-DOCS); React docs (react.dev), Preserving and Resetting State – React, CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)."
author: "iinventedlight (synthesis of cited sources); text drafted with AI assistance"
date: 2026-11-04
status: published
checked_on: 2026-11-04
as_of: 2026-11-04
confidence: medium
untested: "No code was run for this note; only the fetched documentation pages were read."
category: coding-references
topic_area: "code-ai-eng: React"
tags: ['react', 'lists', 'keys']
sources:
  - id: S1
    title: "Rendering Lists – React"
    publisher: React docs (react.dev)
    url: https://react.dev/learn/rendering-lists
    accessed: 2026-11-04
    license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)"
  - id: S2
    title: "Preserving and Resetting State – React"
    publisher: React docs (react.dev)
    url: https://react.dev/learn/preserving-and-resetting-state
    accessed: 2026-11-04
    license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)"
---
# Rendering lists and keys in React

**Answer:** You can store data in JavaScript objects and arrays and use methods like map() and filter() to render lists of components from them. (S1)

## Keys

- Each child in a list should have a unique "key" prop. (S1)
- Keys tell React which array item each component corresponds to, so that it can match them up later. (S1)
- A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree. (S1)
- If your data is coming from a database, you can use the database keys/IDs, which are unique by nature. (S1)
- It's okay to use the same keys for JSX nodes in different arrays. (S1)

## Position and state

- React keeps track of which state belongs to which component based on their place in the UI tree. (S2)
- In React, each component on the screen has fully isolated state. (S2)

## Claims
- id: C1
  claim: A well-chosen key helps React.
  source: S1
  evidence: "A well-chosen key helps React infer what exactly has happened"
- id: C2
  claim: Keys match items to components.
  source: S1
  evidence: "Keys tell React which array item each component corresponds to"
- id: C3
  claim: Database IDs make good keys.
  source: S1
  evidence: "you can use the database keys/IDs, which are unique by nature."
- id: C4
  claim: State is tied to tree position.
  source: S2
  evidence: "They might appear in the same place in the UI"

## Sources
- [S1] Rendering Lists – React. React docs (react.dev). https://react.dev/learn/rendering-lists . License: CC BY 4.0 (reactjs/react.dev LICENSE-DOCS). Accessed 2026-11-04.
- [S2] Preserving and Resetting State – React. React docs (react.dev). https://react.dev/learn/preserving-and-resetting-state . License: CC BY 4.0 (reactjs/react.dev LICENSE-DOCS). Accessed 2026-11-04.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted).