Skip to content


 Zabbix
 Grafana
 Prometheus
 React Three Fiber
 Threejs and TypeScript
 SocketIO and TypeScript
 Blender Topological Earth
 Sweet Home 3D
 Design Patterns Python
 Design Patterns TypeScript
   
 Course Coupon Codes
Three.js and TypeScript
Kindle Edition
$6.99 $9.99 Paperback 
$22.99 $29.99




Design Patterns in TypeScript
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99




Design Patterns in Python
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99




useRef Hook

Import

import { useRef } from 'react'

Video Lecture

Section Video Links
useRef Hook useRef Hook useRef Hook

Description

If you want to read or modify the properties of a component instance at run time, then it is beneficial to have some kind of reference to that instance.

In this example, I get a reference to each of the Box component instances, which are actually each a THREE.Mesh under the hood, and log them to the console.

I will use the React useRef hook.

const instanceRef = useRef(initialValue)

The initial value, if not set, will be undefined until it is initialized when the JSX is rendered.

You have the option to set an initialValue. E.g., {}, [], or 1, or any value or object you need it to be, to act as a default until the reference is finally initialized.

./src/Box.jsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import { useRef } from 'react'

export default function Box(props) {
  const ref = useRef()
  console.log(ref)

  return (
    <mesh {...props} ref={ref}>
      <boxGeometry />
      <meshBasicMaterial color={0x00ff00} wireframe />
    </mesh>
  )
}

Note

Accessing a ref outside a hook, as I do in line 5, is not recommended. We will discuss this further in the next lesson. In this lesson it is important just to know that ref exists and that it can be used to imperatively interact with the inner properties and methods of a component instance.

If you look at the console, you will see the object properties written twice. This is because we added two Boxes to the scene. You can navigate the object trees and see that they have different positions and name in the scene.

Another important thing to note about useRef, is that it is mutable. Changing it, or any property of it, won't cause a re-render of the component instance to happen, unlike changing props or state.

useRef reactjs.org w3schools.com