useRef

As explained in D3.js in Action, Third Edition

useRef() is a React hook that creates a persistent mutable reference object across component renders.

useRef() gives a React component a ref object for controlling a particular element. Attach the ref to the element, then read its current instance inside useEffect(). section 8.5.1

Use the ref-and-effect pattern to let D3 control part of a React visualization:

• Import useRef and useEffect from React, then initialize a ref such as scatterplotRef. section 8.5.1
• Attach the ref to the SVG element that D3 should control, such as <g ref={scatterplotRef}></g>. section 8.5.1
• Inside useEffect(), select scatterplotRef.current with d3.select() and build the visualization there. section 8.5.1

Controlling a scatterplot group

const scatterplotRef = useRef(); useEffect(() => { const scatterplotContainer = d3.select(scatterplotRef.current); // Build scales, axes, and marks with D3 here. }, []); return <g ref={scatterplotRef}></g>;

Figure 8.5 To let D3 control a portion of the DOM in React, we first need to import the useRef() and the useEffect() hooks into our component. We then initialize a ref and attach it as an attribute to the element we want to control with D3. Finally, inside a useEffect() hook, we select the current instance of the ref and start using D3 as usual.

The ref connects React’s rendered element to D3 code executed in useEffect(). section 8.5.1

How D3.js in Action, Third Edition covers it

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 it assumes

Assumes basic React components and D3 usage while demonstrating the ref-and-effect wiring explicitly.

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.

How it connects

Links useRef with useEffect, D3, React components, SVG elements, and the DOM.

liveBookmanning.com

Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  React Hooks in Action: With Suspense and Concurrent ModeuseRef 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.
• 

  liveBookmanning.com
  React Quickly, Second EditionuseRef is a React Hook that returns a mutable reference object whose value persists across renders without causing a re-render when changed.

Compare how 3 books explain useRef →

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.

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.