Additional Exports

Fresh

Additional utility exports available from @react-three/fiber.

Export	Usage
addEffect	Adds a global render callback which is called each frame
addAfterEffect	Adds a global after-render callback which is called each frame
addTail	Adds a global callback which is called when rendering stops
buildGraph	Collects nodes and materials from a THREE.Object3D
flushGlobalEffects	Flushes global render-effects for when manually driving a loop
flushSync	Force React to flush any updates synchronously and immediately
invalidate	Forces view global invalidation
advance	Advances the frameloop (given that it's set to 'never')
extend	Extends the native-object catalogue
createPortal	Creates a portal (React feature for re-parenting)
createRoot	Creates a root that can render three JSX into a canvas
events	DOM pointer-event system
applyProps	applyProps(element, props) sets element properties
act	Usage with react-testing
useInstanceHandle	Exposes react-internal local state from instance.__r3f

extend

Extends the native-object catalogue so third-party or custom elements can be used declaratively:

import { extend } from '@react-three/fiber'
import { OrbitControls } from 'three-stdlib'

extend({ OrbitControls })

// Now usable as JSX
<orbitControls />

invalidate

Forces a re-render. Useful when frameloop="demand" and something changes outside of React's awareness:

import { invalidate } from '@react-three/fiber'

// Request a new frame to be rendered
invalidate()

INFO

Calling invalidate() will not render immediately — it merely requests a new frame. Calling it multiple times will not render multiple times.

advance

Advance one tick of the render loop. Only works when frameloop === 'never':

import { advance } from '@react-three/fiber'

advance(timestamp)

createPortal

Creates a portal for re-parenting React content into a different three.js scene or object:

import { createPortal } from '@react-three/fiber'

function MyPortal({ children, scene }) {
  return createPortal(children, scene)
}

applyProps

Sets properties on a three.js element using the same logic R3F uses internally:

import { applyProps } from '@react-three/fiber'

const mesh = new THREE.Mesh()
applyProps(mesh, { position: [1, 2, 3], 'material-color': 'hotpink' })

addEffect / addAfterEffect / addTail

Global render callbacks that run outside of any component:

import { addEffect, addAfterEffect, addTail } from '@react-three/fiber'

// Runs before every frame render
const removeEffect = addEffect(() => {
  // Do something before render
})

// Runs after every frame render
const removeAfterEffect = addAfterEffect(() => {
  // Do something after render
})

// Runs when the render loop stops
const removeTail = addTail(() => {
  // Do something when rendering stops
})

// Clean up by calling the returned function
removeEffect()

buildGraph

Collects nodes and materials from a THREE.Object3D into named collections:

import { buildGraph } from '@react-three/fiber'

const { nodes, materials } = buildGraph(object3D)