State Management Without Restarting Render Loop

[fweth]

What's the best way to stop an RTF component from rerendering (i.e. restarting the render loop) after state change? I noticed that the RTF examples all return the Canvas component in the App.js, but what if I want to integrate the Canvas in a larger ensemble?

When I manually create a component rendering to the canvas (in vanilla React), I usually wrap everything in useEffect and create refs for the states, so the render loop can reflect state changes without restarting (the states are not in the dependency array). But what's the best way to achieve this with RTF's Canvas?

Or is the Canvas always meant to wrap the whole app?

[CodyJasonBennett]

Canvas is your entry point for three, you can use that alongside other DOM elements.

I'm not sure what you mean by restarting render loop, useFrame subscriptions live outside of react.

[drcmda]

Does useState, and props changes, still trigger re-renders in the same way?

i think you're mixing up something.

react render has little to do with threejs rendering or the gpu rendering. react is only concerned about the structure, it builds a graph of threejs nodes, it works the same way as everything else in react (react-dom, react-native, etc). when you change a prop it writes that prop into the threejs node it has created.

<meshBasicMaterial color="red" />

and react will make that

const m = new THREE.MeshBasicMaterial({ color: "red" })

now you change it

<meshBasicMaterial color="blue" />

it already exists so react won't re-create it, will alter it:

c.color.set("blue")

none of this will trigger anything. unless you're working with <Canvas frameloop="demand" which means it will only let threejs render on changes. a prop change would now cause a gl.render(scene, camera) call, but that mode is not the default. by default the renderloop runs all the time.

Is useFrame and refs The recommended way to check for changes without triggering rerenders?

useFrame binds a component to the render-loop. the render-loop runs 120 or 60 fps depending on your device. everything inside useFrame is called every frame. after all useFrames have been called r3f lets three render. this is all outside of react, it doesn't cause react-render. it's unfortunate that the name "render" applies to react, three and the gpu shaders, that's what makes it confusing.

and that's correct, you create a ref, and change it inside useframe, that's how you animate:

function Foo() {
  const r = useRef()
  useFrame((state) => r.current.position.x = Math.sin(state.clock.elapsedTime))
  return <mesh ref={r} ... />

when the component unmounts the effect is cleaned up, it'll be taken out of the renderloop.

[Seanmclem]

Thanks I think I understand all that. In your examples you directly worked with primatives. What if you had three js primatives inside a larger component,and that component had props getting changed or useStates getting set? Would all the same things apply? Or any considerable differences

[Seanmclem]

Also, are you saying something like, that if I update props or state on a component containing threejs primitives - that the react component may "re-render" with updated values or calculations, but the actual rendered threejs won't Change until the next frame of its own render loop, during which it would just use the most recent value of the react state or prop..?

[fweth]

Hey @Seanmclem, sorry, I didn't see your reply! I found support in another thread and realized that I was totally off the track with my approach, so I got a little ashamed of myself. My problem was that I had some camera position, which should be a ref, as it changes with every frame, but instead I initialized it in the component, which led to the problem of keeping the component from rerendering (hence resetting the position), etc. but it was really the wrong approach all in all. Keeping the position in a ref solved it for me completely.

Thanks for your answer!

[Seanmclem]

@fweth Thanks. Sorry I was just kind of hijacking your thread with a similar question. I'm still probably just a little confused about how the threejs and react kind of coexist separately.