Ref
A ref is a mechanism for retaining access to a rendered element, component, or value outside ordinary rendering data flow.
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.
- How it is used
- Uses refs for non-rendering values, timer identifiers, DOM elements, focus management, and uncontrolled form fields.
- How deep it goes
- Explains useRef, current, render persistence, timers, focus, and uncontrolled inputs, while recommending controlled components for form state.
- Examples
- Demonstrates counters, timer-driven Presentation Mode, automatic button focus, and date entry through an uncontrolled text box.
- What you can do after
- Apply it via useRef to persist mutable values, cancel timers, focus DOM elements, and read uncontrolled inputs.
Read how React Hooks in Action: With Suspense and Concurrent Mode explains ref →
D3.js in Action, Third Edition
A React ref is an object or callback mechanism that provides access to a rendered component or DOM element.
- How it is used
- Connects React-rendered elements to D3 when D3 must control part of the DOM.
- How deep it goes
- Explains initialization, attachment, current-element selection, and effect placement through chart implementations.
- Examples
- Uses a D3-controlled scatterplot and a hybrid rankings visualization with animated curve paths.
- What you can do after
- Apply it via useRef, useEffect, and D3 to select and animate rendered chart elements.
React in Depth
A 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.
- How it is used
- Exposes an internal rendered element to an outside component for imperative operations such as focusing an input.
- How deep it goes
- Explains forwarding, DOM assignment, TypeScript errors, and two typing strategies, then notes the React 19 simplification.
- Examples
- Uses a login form whose parent focuses a forwarded username input after rendering.
- What you can do after
- Build it from scratch by typing, forwarding, and attaching a ref to a custom input component.
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.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.