← All notes

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).

@misc{iil_note_t2nr1a4a,
  author = {{iinventedlight}},
  title = {{React refs and useRef}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-04},
  url = {https://iinventedlight.com/library/notes/react-refs/},
  note = {Permanent ID iil:note:t2nr1a4a. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt. This page in Markdown: /library/notes/react-refs.md.