---
source: https://iinventedlight.com/library/notes/react-refs.md
title: "React refs and useRef"
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), Referencing Values with Refs – React, CC BY 4.0 (reactjs/react.dev LICENSE-DOCS); React docs (react.dev), useRef – 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', 'refs', 'hooks', 'useref']
sources:
  - id: S1
    title: "Referencing Values with Refs – React"
    publisher: React docs (react.dev)
    url: https://react.dev/learn/referencing-values-with-refs
    accessed: 2026-11-04
    license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)"
  - id: S2
    title: "useRef – React"
    publisher: React docs (react.dev)
    url: https://react.dev/reference/react/useRef
    accessed: 2026-11-04
    license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)"
---
# React refs and useRef

**Answer:** When you want a component to "remember" some information, but you don't want that information to trigger new renders, you can use a ref. useRef is a React Hook that lets you reference a value that's not needed for rendering. (S1, S2)

## How a ref behaves

- Call the useRef Hook and pass the initial value that you want to reference as the only argument. (S1)
- You can access the current value of that ref through the ref.current property, which is intentionally mutable. (S1)
- Unlike state, a ref is a plain JavaScript object with the current property that you can read and modify. (S1)
- Like state, refs are retained by React between re-renders. (S1)
- On the next renders, useRef will return the same object. (S2)

## Rules

- When you change the ref.current property, React does not re-render your component. (S2)
- Do not write or read ref.current during rendering, except for initialization. (S2)
- If you pass the ref object to React as a ref attribute to a JSX node, React will set its current property. (S2)
- When a piece of information is used for rendering, keep it in state. (S1)

## Claims
- id: C1
  claim: A ref remembers information without triggering renders.
  source: S1
  evidence: "you can use a ref."
- id: C2
  claim: Refs are retained between re-renders.
  source: S1
  evidence: "Like state, refs are retained by React between re-renders."
- id: C3
  claim: Changing ref.current does not re-render the component.
  source: S2
  evidence: "When you change the ref.current property, React does not re-render your component."
- id: C4
  claim: Do not read or write ref.current during rendering.
  source: S2
  evidence: "Do not write or read ref.current during rendering, except for initialization."

## Sources
- [S1] Referencing Values with Refs – React. React docs (react.dev). https://react.dev/learn/referencing-values-with-refs . License: CC BY 4.0 (reactjs/react.dev LICENSE-DOCS). Accessed 2026-11-04.
- [S2] useRef – React. React docs (react.dev). https://react.dev/reference/react/useRef . 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).