Dom reference

As explained in React Quickly, Second Edition

A DOM reference is a program-held reference to an actual DOM element rendered in a document.

A DOM reference lets a React component hold a program-accessible reference to an element it renders. useRef supplies the reference without causing a re-render when its value changes. section 7.1.3

Focusing an input

Create a ref, attach it to the input, and access the rendered element through ref.current: useEffect(() => ref.current.focus(), []). section 7.1.3

Use a DOM reference when a component needs to:

• Address a rendered DOM element through script. section 7.1.3
• Read or update ref.current without triggering a new render. section 7.1.3

Figure 7.1 As the user clicks the button, the execution bifurcates based on whether this click happens within a very short time of the last recorded click.

Use the related listings to compare a ref attached to a DOM element with a ref used to retain an internal value. section 7.1.3

How React Quickly, Second Edition covers it

How deep it goes

Shows ref assignment and ref.current access through small listings, without developing broader DOM manipulation details.

Examples

Demonstrates an AutoFocusInput component that focuses an input through a ref inside an effect.

What you can do after

Apply it via useRef to retain access to rendered elements and focus an input without rendering for the reference update.

How it connects

Connects DOM references with useRef, ref.current, useEffect, React components, and JSX.

liveBookmanning.com

Read React Quickly, Second Edition on liveBook Get the book at manning.com

Related concepts

• useRefused 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.
• useEffectused by · useEffect is a React Hook that runs effect logic after rendering to synchronize a component with external systems and optionally perform cleanup.

This explainer was generated by Manning's knowledge graph from the text of React Quickly, Second Edition. The section links point to the parts of the book it draws on.