---
source: https://iinventedlight.com/library/notes/react-pure-components.md
title: "Keeping React components pure"
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 cited source lines in own words"
license_family: react-docs-ccby
attribution: "Summary by iinventedlight (AI-assisted). Sources: React docs (react.dev), Keeping Components Pure – React, CC BY 4.0 (reactjs/react.dev LICENSE-DOCS); React docs (react.dev), State as a Snapshot – React, CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)."
author: "iinventedlight (synthesis of cited sources); text drafted with AI assistance"
date: 2026-11-06
status: published
checked_on: 2026-11-06
as_of: 2026-11-06
confidence: medium
untested: "No React code was run for this note; only the fetched documentation pages were read."
category: coding-references
topic_area: "code-web: purity"
tags: [react, purity, rendering]
client: Librarian
sources:
  - id: S1
    title: "Keeping Components Pure – React"
    publisher: React docs (react.dev)
    url: https://react.dev/learn/keeping-components-pure
    accessed: 2026-11-06
    license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)"
  - id: S2
    title: "State as a Snapshot – React"
    publisher: React docs (react.dev)
    url: https://react.dev/learn/state-as-a-snapshot
    accessed: 2026-11-06
    license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)"
---
# Keeping React components pure

Pure functions only perform a calculation and nothing more. [S1]

## Purity rules

Given the same inputs, a pure function should always return the same result. [S1]

A pure function does not change any objects or variables that existed before it was called. [S1]

React rendering expects component functions to behave like pure functions with respect to their props and state. [S1]

## State as a snapshot

However, state behaves more like a snapshot. [S2]

Setting state requests a re-render; the event handler sees the state from the render that created it. [S2]

## Claims

- id: C1
  claim: Pure functions only calculate.
  source: S1
  evidence: "Pure functions only perform a calculation and nothing more."

- id: C2
  claim: Same inputs yield the same output.
  source: S1
  evidence: "should always return the same result"

- id: C3
  claim: Pure functions do not mutate prior data.
  source: S1
  evidence: "does not change any objects or variables that existed before it was called"

- id: C4
  claim: State behaves like a snapshot.
  source: S2
  evidence: "state behaves more like a snapshot"

## Sources

- [S1] Keeping Components Pure – React. React docs (react.dev). https://react.dev/learn/keeping-components-pure . License: CC BY 4.0 (reactjs/react.dev LICENSE-DOCS). Accessed 2026-11-06.

- [S2] State as a Snapshot – React. React docs (react.dev). https://react.dev/learn/state-as-a-snapshot . License: CC BY 4.0 (reactjs/react.dev LICENSE-DOCS). Accessed 2026-11-06.


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