How To Stop RTF Component From Restarting

[fweth]

I want a component which uses RTF and useFrame to render a table with various items and the state dictates which item is in focus, but with smooth transitions, so when the state changes, the camera smoothly pans from one item to the next (according to the state change).

I already achieved all of this, but I'm not sure what's the best design pattern. Since I don't want the RTF setup to restart on state change, I wrapped the Canvas inside React.memo and its prop is a reference to the state created with useRef. So the Canvas only renders once, but is able to call the current state in each frame. Is this the most elegant way to solve this?

[drcmda]

not sure what you mean by restarting. react render is mostly just diffing, it looks for changes, it won't do a thing from scratch. you can cut down on this either with a state management tool (for instance zustand) or manually with React.memo. if things actually restart somewhere on render, then you have side effects, for instance a vector newly created inside the render function etc. components should be 100% resilient against render, they should not fall out or drop state, and you achieve that by avoiding all side effects.

if you want to show me code (if it's small and readable) by all means we can look into it deeper.

[fweth]

Thanks so much for the answer!

I made a little demo: https://codesandbox.io/s/em1gcv

Here I want the Cubes component to take an integer as input, but smoothly change the camera target based on that input. Without any memoization, the camera will be reset to the default position at every state change and only then transition to the given target.

[drcmda]

no :-D please don't do that!

the root cause is this:

const target = new THREE.Vector3(0, 0, 0)

every time the component renders you reset the target. and you fix it like so:

const [target] = useState(() => new THREE.Vector3(0, 0, 0));

the ref.current react.memo thing is downright evil, imagine how complicated apps would be if you had to do that.

that's what i meant with components being resilient against render, a component should never rely on being rendered a certain amount of times (once, twice, ...). in dev/strictmode react will even force components to render twice to surface problems like that. there should be no side effects, you should never create something in the render function. the component only carries state (props), hooks and the view. local dynamic state -> useMemo, local static state -> useState, side effects -> useLayoutEffect & useEffect.

[fweth]

OMG, sooo much better and cleaner!! Thanks a lot!