Change of camera zoom doesn't trigger useEffect

[SashaPonomarov]

When camera is obtained from useThree, and camera.zoom property is provided in the dependency array of useEffect, I expected it to trigger on zoom change, but it doesn't. Other camera properties, like .left or .top, do trigger useEffect though.

Here is a working demo.

I can get correct zoom value in useFrame, but I'm just curious why it behaves so?

[drcmda]

the camera is a threejs class, it is not reactive, that's not how react and useEffect work:

const foo = 1

function Bar() {
  useEffect(() => {
    // this will fire once
  }, [foo])
}

setTimeout(() => (foo = 2), 1000)

useEffect simply memoizes the dependency array and checks it against new values on re-render. for a re-render to occur the component either has to get new props or it must render due to hooks triggering it.

viewport and size are updated on window resize, they trigger every component that has useThree due to context, this is what the <Canvas/> component is there for.