I have a next JS app that is using react through fiber to create and render a scene with a model of an airplane. I have an array that contains about 50,000 objects that describe the airplanes position and rotation. I’m using the use frame hook to set an active index based on how much time has passed in between frames.

  useFrame((state, delta) => {
      console.log("setting active index");
      if (!isPaused) {
        const frameDelta =
          delta * speedFactor * sampleRate + roundingError.current;
        const roundedFrameDelta = Math.round(frameDelta);
        roundingError.current = frameDelta - roundedFrameDelta;
        setActiveIndex((prevIndex: number) => prevIndex + roundedFrameDelta);
      }
  });

This hook updates the active index in a Zustand store and as a side effect the airplanes position in Zustand gets updated as well.

      setActiveIndex: (newIndex) => {
        set({activeIndex: newIndex});
        get().setAirplanePositionAndRotation();
      },

Generally this solution works and the airplane flies around the scene if you are on windows and you hold down any key on the keyboard the airplane doesn’t fly around the scene anymore. I know that the frame rate isn’t dropping because the plane has a propeller on it that is spinning. This is also using the use frame hook and just updates its rotation each frame to spend the propeller. Also the console.log(“setting active index”) is still logging 33 times per second, however, if I console log the airplane position from the scene component there are no updates.

(neiter work when holding a key down, useFrame logs the same position, useEffect logs nothing, aerplane position not updating)

        const {
          airplanePosition,
        } = useAcroStore((state) => ({
          airplanePosition: state.airplanePosition,
        }));

        useFrame(() => {
          console.log(airplanePosition);
        });

        useEffect(() => { 
          console.log(airplanePosition);
        }, [airplanePosition]);

console of not working

The super confusing thing is that if I console log the same variable, airplanePosition, from the same Zustand store from a different component that does not use react three fiber, the airplane position variable is updating as it should.

(same code, different component, no useFrame as this component doesn’t use react three fiber. this print just fine when a key is held down. )

        const {
          airplanePosition,
        } = useAcroStore((state) => ({
          airplanePosition: state.airplanePosition,
        }));

        useEffect(() => { 
          console.log(airplanePosition);
        }, [airplanePosition]);

console working

Why would holding a key down prevent the airplane position from updating in react three fiber components but not in other components? And why might this only be happening on windows computers. I’ve tried multiple browsers and the same issue occurs, only on windows. I have also removed all event listeners and keyboard handlers from the app and still the same issue occurs.

Ive tried multiple browsers and the issue is the same. Ive tried removing all onKeyDown and all document.adeventListener("keydown") event listeners. this issue happens both in dev and in production environments