YT Tutorial: Get started with React and Three.js: Issues with UseState & React-spring

Followed along this very helpful tutorial but at the end he uses the useSpring Hook to animate state changes. When I download his code it works but in my own project the click function either works once or not at all. I’m guessing this has something to do with updated packages. Is there a better way to handle onClick animations now?
My code is the exact same as what is in the github folder, just with newer dependencies.

You can test that assumption by downloading the tutorial code and updating the packages (or reverting your versions to match the one from the tutorial and see if it’s working.)

There’s probably only one right way to do animations in react-three-fiber - you control the animation on/off state using react state, and control the animation update using useFrame().

Since that’s right in 99.9% cases, my guess would still be that there’s a small typo / change in your code that makes it different from the tutorial code (since the tutorial code is working.) And for react hooks it’s enough to add an if in a wrong place to make the entire thing stop working. :man_shrugging:

I replaced my entire code folder (expect dependencies) with the code from the example and it doesn’t work, so I know that is where the issue is.
In regards to the right way to call it, this is what the example has used:

  const SpinningMesh = ({ position, color, speed, args }) => {
  const mesh = useRef();
  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
  const [expand, setExpand] = useState(false);
  const props = useSpring({
    scale: expand ? [1.4, 1.4, 1.4] : [1, 1, 1],
  });
  return (
    <a.mesh
      position={position}
      ref={mesh}
      onClick={() => setExpand(!expand)}
      scale={props.scale}
      castShadow>
      <boxBufferGeometry attach='geometry' args={args} />
      <MeshWobbleMaterial
        color={color}
        speed={speed}
        attach='material'
        factor={0.6}
      />
    </a.mesh>
  );
};

Now here’s the weird thing. After replacing the in-line onClick with a handler function and logging the event, it appears that the actual click event is not firing. It will only fire max once on each object, and to make me more baffled every time I open and close the chrome dev-tools I am able to click one more time. Any thoughts on this?

Edit: It seems to be an issue with using React Spring, the click function works without it. For reference I am using

import { useSpring, a } from "react-spring/three";

with "react-spring": "^8.0.27",

really sorry but i caused that. some bugfix ended up messing with the applyProps function which react-spring uses to animate threejs. it’s fixed.