Ref

Q: How deeply does React Hooks in Action: With Suspense and Concurrent Mode cover ref?

Explains useRef, current, render persistence, timers, focus, and uncontrolled inputs, while recommending controlled components for form state.

As explained in React Hooks in Action: With Suspense and Concurrent Mode

A React ref is a persistent mutable object that provides access to a value, commonly a rendered DOM element, through its current property.

A React ref is a persistent mutable object whose current property stores a value across component renders. Changing current does not trigger a re-render, making refs useful for values that support application mechanics rather than directly updating the interface. section 5.0 section 5.1.2

Use refs when a value must persist but should not independently update the UI:

Call useRef(initialValue) to receive an object with a current property; React returns the same ref object on each render. section 5.1.2 section 5.4
Assign ref.current to update stored values without causing a re-render; later renders can read the updated value. section 5.1.1 section 5.1.2
Store timer IDs in a ref so an event handler or effect cleanup can cancel the timer without adding timer bookkeeping to rendered state. section 5.2
Attach a ref to a JSX element to let React place the DOM element in current, then call its properties or methods directly. section 5.3 section 5.3.1

Comparing state and ref updates

const [count, setCount] = useState(1);\nconst ref = useRef(1);\n\nconst incCount = () => setCount(c => c + 1);\nconst incRef = () => ref.current++;\n\nThe count button re-renders immediately. The ref button changes ref.current invisibly until another render reveals its latest value. section 5.1.1

Reading an uncontrolled input

const textboxRef = useRef();\n\nfunction goToDate() {\n dispatch({ type: "SET_DATE", payload: textboxRef.current.value });\n}\n\n<input ref={textboxRef} />\n\nThe DOM holds the text while the user types; the handler reads it when Go is clicked. section 5.3.2

Listing 5.1 Comparing `useState` and `useRef` when updating state

import React, { useRef, useState } from "react";
 
function Counter() {
  const [count, setCount] = useState(1);                                #1
  const ref = useRef(1);                                                #2
 
  const incCount = () => setCount(c => c + 1);                          #3
 
  const incRef = () => ref.current++;                                   #4
 
  return (
    <div className="App">
      <button onClick={incCount}>count: {count}</button>                #5
      <hr />
      <button onClick={incRef}>ref.current: {ref.current}</button>     #6
    </div>
  );
}
#1 Initialize the count value with useState.
#2 Initialize the ref value with useRef.
#3 Define a handler that calls setCount to increment count.
#4 Define a handler that updates the “current” property of the ref.
#5 Call the handler for the count value.
#6 Call the handler for the ref value.

Compare useState and useRef in a focused Counter listing, including handlers and rendered values. section 5.1.1

How React Hooks in Action: With Suspense and Concurrent Mode covers it

Cover of React Hooks in Action: With Suspense and Concurrent Mode

liveBook manning.com

Read React Hooks in Action: With Suspense and Concurrent Mode on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

D3.js in Action, Third EditionA React ref is an object or callback mechanism that provides access to a rendered component or DOM element.
liveBook manning.com

React in DepthA React ref is a special property that provides access to a rendered DOM node or component instance rather than being handled as an ordinary component prop.

Compare how 3 books explain ref →

Related concepts

useRefproduced by · useRef is a React Hook that returns a persistent mutable object whose current property can hold a value across renders without causing re-rendering when changed.
attributehas part · An attribute is a named property, value, or piece of information associated with an entity, object, or program element.
component re-renderingcontrasts with · Component re-rendering is the repeated execution of a component’s rendering logic to produce updated user-interface output after relevant data changes.
text boxuses · A text box is an interactive user-interface control for entering, displaying, or editing text.
Reactused by · React is an open-source JavaScript library for building user interfaces from declarative, reusable components.

This explainer was generated by Manning's knowledge graph from the text of React Hooks in Action: With Suspense and Concurrent Mode. The section links point to the parts of the book it draws on.

Ref