useRef
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.
React Hooks in Action: With Suspense and Concurrent Mode
useRef is a React Hook that returns a persistent mutable reference object whose current value can hold a DOM element or other value without causing re-rendering when changed.
- How it is used
- Manages persistent, mutable values and DOM references when changing them should not trigger immediate UI re-rendering.
- How deep it goes
- Explains the current property, render persistence, state comparison, timers, DOM access, focus, and uncontrolled inputs.
- Examples
- Uses counters, timer IDs, Presentation Mode, button focus, and an uncontrolled WeekPicker text box.
- What you can do after
- Apply it to persist mutable values, cancel timers, focus elements, and read uncontrolled DOM inputs.
Read how React Hooks in Action: With Suspense and Concurrent Mode explains useRef →
D3.js in Action, Third Edition
useRef() is a React hook that creates a persistent mutable reference object across component renders.
- How it is used
- Connects React-rendered elements to D3 code that controls selected portions of a visualization.
- How deep it goes
- Explains initialization, attachment, current-element selection, and effect placement, but defers broader ref behavior.
- Examples
- Uses a D3-controlled scatterplot group and a hybrid curve component that transitions an SVG path.
- What you can do after
- Build it from scratch by wiring a React ref to an SVG element and using D3 on its current instance.
React Quickly, Second Edition
useRef is a React Hook that returns a mutable reference object whose value persists across renders without causing a re-render when changed.
- How it is used
- Stores component values that should not trigger rendering and provides references to DOM elements used in UI behavior.
- How deep it goes
- Works through `current` updates, DOM attachment, and effect-driven element access using small components.
- Examples
- Demonstrates a double-click counter, an autofocus input, and an outside-click menu.
- What you can do after
- Apply it via React to retain non-render data or access DOM nodes for focus and event handling.
Related concepts
- refproduces · A ref is a mechanism for retaining access to a rendered element, component, or value outside ordinary rendering data flow.
- Reactuses · React is an open-source JavaScript library for building user interfaces from declarative, reusable components.
- React hookkind of · A React Hook is a function-based API that enables function components to access state, effects, context, and other React capabilities.
- 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.
- useStatealternative to · useState is a React Hook that provides a function component with a state value and a function for updating it.
- current propertyuses · A ref’s current property is a mutable property that stores the value currently referenced or retained by the ref.
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.