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




useEffect Hook

Import

import { useEffect } from 'react'

Video Lecture

Section Video Links
useEffect Hook useEffect Hook useEffect Hook

Description

In the last example, there was a very subtle error which you might not have picked up if I didn't bring it to your attention.

When I used console.log(ref) in the last example, the Mesh hadn't actually finished being created in Three.js scene yet. So, if we needed to do any logic on that data within our script, then we would have needed to make sure that it actually existed first, otherwise ref.current would have been still undefined. This is because we tried to access ref and more specifically, it's current property, before it had been set when the JSX was converted into a Three.js object.

A way to improve on my last example would be to use the React useEffect hook.

./src/Box.jsx

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

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

  useEffect(() => {
    console.log(ref.current)
  })

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

The useEffect hook executes after the function returns the generated component instance within in it, which means the any ref will be assigned before the useEffect hook gets called.

UseLayoutEffect

Now one very subtle detail about useEffect that you may not ever notice when user React Three Fiber, is that since useEffect is asynchronous, the callback may get called after the first time the underlying WebGL pixels were drawn to the Canvas on the DOM.

Since by default, React Three Fiber is continuously triggering WebGL data to be drawn to the Canvas, you may not notice any delay occurring, such as repositioning any mesh. This is not something I have ever noticed when running React Three Fiber using default settings.

However, if you configure the React Three Fiber Canvas to use frameloop="demand".

<canvas frameloop="demand"></canvas>

Then, you may see, very briefly, an object being rendered before it is repositioned, and then the canvas is rendered once again.

If you ever notice this problem, then you can solve it by using useLayoutEffect instead of useEffect. The hook method signature is the same, but useLayoutEffect will be called synchronously before the browser has a chance to paint.

To simulate this, you can try this code in your existing boilerplate. Note that the conditions to reproduce this behavior are very specific, so you may not see it.

./src/App.jsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { Canvas } from '@react-three/fiber'
import Box from './Box'

export default function App() {
  return (
    <Canvas camera={{ position: [0, 0, 2] }} frameloop="demand">
      <Box position={[-0.75, 0, 0]} name="A" />
      <Box position={[0.75, 0, 0]} name="B" />
    </Canvas>
  )
}

./src/Box.jsx

First, using useEffect, when you refresh the browser, you may see the right box flash as its position.y is modified from 0 to 1.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { useRef, useEffect } from 'react'

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

  useEffect(() => {
    if (ref.current.name === 'B') {
      ref.current.position.y = 1
    }
  })

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

Secondly, using useLayoutEffect, when you refresh the browser, you shouldn't see the flash as the boxes position.y is modified from 0 to 1.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { useRef, useLayoutEffect } from 'react'

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

  useLayoutEffect(() => {
    if (ref.current.name === 'B') {
      ref.current.position.y = 1
    }
  })

  return (
    <mesh {...props} ref={ref}>
      <boxGeometry />
      <meshBasicMaterial color={0x00ff00} wireframe />
    </mesh>
  )
}
useEffect reactjs.org w3schools.com codesandbox.io
useLayoutEffect reactjs.org

Working Example