Best practice for accessing hooks outside of Canvas

[maxibenner]

I am trying to build a hook for recording a scene based on useFrame(). What would be the best way to make useFrame available outside of the Canvas context? Would it be problematic to pass it up to a global state?

[drcmda]

useFrame is context based, it won't work outside of canvas. there are multiple ways though.

you could, or you could also use the subscribe api directly, it's part of the state model and just needs a react ref that points to the callback (useRef, createRef or fake it with { current: fn }

function onFrame(state, delta) {
  // will call this every frame
}

<Canvas onCreated={state => {
  const sub = state.internal.subscribe({ current: frameRef }, priority)
  // sub() to destroy it

or global effects

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

const sub = addEffect(() => console.log("called every frame"))
// sub() to destroy it

you also have complete clock control and you can advance the scene frame by frame using advance. https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/tests/web/web.hooks.test.tsx#L72-L95

[maxibenner]

Great answer, thank you!

@drcmda I just noticed that the callback from addEffect seems to be called many times more frequently than the 60/s of useFrame. I could debounce it but I'm curious if and why this is the intended behavior?