I am working on a project that displays sensor data from an airplane to show orientation using React Three Fiber (R3F). There are also other components, like a chart, that rely on this same data. The data is recorded at 100 Hz and stored in a large array.

I’m using the useFrame hook to replay this data. The problem I’m encountering is that the chart (and some other components) need state to display the correct data. If I try to set the active data index from within the useFrame hook, performance significantly decreases.
The solution I currently have working is to use a shared object for all the React Three Fiber components, where the active data index is set:

// Shared object for all the React Three Fiber components
export const airplaneInfo = {
  data: [] as FrameData[],
  activeIndex: 0,
};

export function updateActiveIndex(delta: number) {
  airplaneInfo.activeIndex += delta;
}

In the R3F component, I’m setting the active index like this:

useFrame((state, delta) => {
  if (!isPaused) {
    const frameDelta = delta * speedFactor * sampleRate + roundingError.current;
    const roundedFrameDelta = Math.round(frameDelta);
    roundingError.current = frameDelta - roundedFrameDelta;
    updateActiveIndex(roundedFrameDelta);
  }
});

Because this can’t be stateful, but other components need to update based on the active index, I’m checking for updates to this object 30 times per second in other components that aren’t related to React Three Fiber:

// Component that doesn't use R3F but still needs to update

const [activeIndex, setActiveIndex] = useState(0);

useEffect(() => {
  const interval = setInterval(() => {
    setActiveIndex(airplaneInfo.activeIndex);
  }, 33);

  return () => clearInterval(interval);
}, []);

This approach seems rather hacky. How should I trigger a state update in these components when the active index changes if I can’t set the state directly in the useFrame hook? Is there a better way?