sharing useFrame computed state across multiple components

[dudleycraig]

how does one share state computed within useFrame across multiple components? ie is a CustomEvent and handler preferred for propagating state? or a custom hook? ... i've tried a CustomEvent but this seems unwieldy and a custom hook more appropriate, tho when i try a custom hook i believe i have a conflict in state ...

here's my custom hook ...

/**
 * merge two streams of similar data
 * one stream comes from websocket api managed by zustand, and has a default sample-rate of about 2 seconds
 * the second stream updates every frame change, roughly 60 frames / second, mimics what the data might look like between api samples and handled by native useState
 */
export default () => {
  const { dc, status, metrics } = useStore((state) => state.api);
  const [sample, setSample] = useState(metrics.slice(-1)[0]);
  const advanceSample = (duration, sample) => {
    if (status === 'open') {
      const radiansPerSecond = (sample.rpm / 60) * 2 * Math.PI;
      const radiansPerFrame = radiansPerSecond * duration;
      const r = (sample.r + radiansPerFrame) % (2 * Math.PI);
      const active = degreesToActive[r * (180 / Math.PI)];
      return {
        ms: Date.now(),
        r,
        rpm: sample.rpm,
        c1: { mA: mA(active, dc), t: t(active, dc) },
        c2: { mA: mA(active, dc), t: t(active, dc) },
        c3: { mA: mA(active, dc), t: t(active, dc) },
        c4: { mA: mA(active, dc), t: t(active, dc) },
        c5: { mA: mA(active, dc), t: t(active, dc) },
        c6: { mA: mA(active, dc), t: t(active, dc) },
      };
    }
    return sample;
  };
  useFrame(({ clock }, delta) => setSample(advanceSample(delta, sample)));

  // const sampleEvent = new CustomEvent('sample', { detail: { sample } });
  // document.dispatchEvent(sampleEvent);

  return sample;
};

const degreesToActive = range(1, 360).reduce((accumulator, element, index) => {
  const angle = index + 1;
  if (angle === 360 || angle < 60) accumulator[angle] = 0;
  else if (angle >= 60 && angle < 120) accumulator[angle] = 1;
  else if (angle >= 120 && angle < 180) accumulator[angle] = 2;
  else if (angle >= 180 && angle < 240) accumulator[angle] = 3;
  else if (angle >= 240 && angle < 300) accumulator[angle] = 4;
  else if (angle >= 300 && angle < 360) accumulator[angle] = 5;
  return accumulator;
}, []);

[drcmda]

If you want to share a calculation then it should come from the state model or a parent. Look into zustand for instance. That space game on the gh front did that, a store that's doing frame by frame calculations and nested components can listen to it without being re-rendered.

[dudleycraig]

thanx for the response.

the state changes on every frame and having it in the store would add too much overhead where it's not required. Is it not possible to write a hook using useFrame to encapsulate those state changes? the other option which works, is to trigger an event within useFrame on state change and broadcast. By state model I'm assuming you mean react state management, useState? I have used the game as a reference for a lot of the work i have done, as mentioned, i am using zustand for state-management which has become my defacto state manager. As soon as i have to do any kind of hacky crap in the code it's too complicated. In this case my intent will be less understood if i recompose. A hook encapsulating state change makes the most sense and remains standard practice regarding react.

regardless of how i want to use it, can useFrame be used within a custom hook?

ie const updatedSample = useSampleHook()

[dudleycraig]

after further reading i found it is appropriate to subscribe to rapidly changing state thru state managers, specifically zustand as follows ...

Fetch state directly, for instance using zustand

useFrame(() => ref.current.position.x = api.getState().x)
return <mesh ref={ref} />

from https://github.com/pmndrs/react-three-fiber/blob/master/markdown/pitfalls.md.

thank you drcdma.

[dudleycraig]

found an appropriate answer here ... https://github.com/pmndrs/react-three-fiber/blob/master/markdown/pitfalls.md
doesn't solve the issue i have, tho setting state within useFrame is a bad idea. Guess a recomposition is in my future ... again.