does useFrame and zustand conflict with useState? - react-hooks

Question

I have data retrieved from websocket sampled by default, every 2 seconds.
I propagate this data using zustand for state management.
I have multiple animations/components dependent on this data.
To compensate the 2 seconds interval gap I calculate what the data might be each frame which is not handled by zustand, but by useState.
I can use CustomEvent to update all the dependent components every frame or I can use a custom hook, i think, which i prefer.
The problem being that whenever the api > zustand > useStore updates local state (sample) of hook, useFrame loses local state.
Here's the hook ...
/**
* merge two streams of similar data
* one stream comes from api and has a default sample-rate of about 2 seconds
* the second stream updates every frame change, roughly 60 frames / second
*/
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;
};
the quick answer is no, neither useFrame, zustand nor React.useState conflict in this case
My solution was to update managed state, thru zustand, on every frame and propagate state via the state manager as follows ...
store method:
// increment state
next: (duration) => {
const { dc, metrics } = get().api;
const [sample] = metrics.slice(-1);
const ms = Date.now();
if (get().api.status === 'open') {
const radiansPerSecond = (sample.rpm / 60) * 2 * Math.PI;
const radiansPerFrame = radiansPerSecond * duration;
const r = (sample.r + radiansPerFrame) % (2 * Math.PI);
const active = activeCoilIndex[r * (180 / Math.PI)];
set({
api: {
...get().api,
metrics: [
...get().api.metrics,
{
ms,
r,
rpm: sample.rpm,
...range(1, 6).reduce((accumulator, coil, index) => ({ ...accumulator, [`c${coil}`]: { mA: mA(active, dc), t: t(active, dc) } }), {}),
},
].slice(-512),
},
});
}
then within a separate component:
// increment state at generally 60fps
const nextSample = useStore((state) => state.api.next);
useFrame(({ clock }, delta) => nextSample(delta));
and finally propagation:
// use current state within each component as follows
const unsubscribe = useStore.subscribe(
(metrics) => {
const [sample] = metrics.slice(-1);
if (crankshaftRef.current) crankshaftRef.current.rotation.z = sample.r;
const sqrRodLength = Math.pow(rodLength, 2);
const sqrCrankRadius = Math.pow(crankRadius, 2);
const calcMotion = (offsetRotation) => {
const radians = sample.r + offsetRotation;
const cosR = Math.cos(radians);
const sinR = Math.sin(radians);
const displacement = crankRadius * cosR + Math.sqrt(sqrRodLength - sqrCrankRadius * Math.pow(sinR, 2));
const moment = Math.asin(crankRadius / (rodLength / sinR)) * -1;
return [displacement, moment];
};
if (conrod1Ref.current && plunger1Ref.current) {
const [displacement, moment] = calcMotion(pistonsModels['piston1'].offsetRotation);
conrod1Ref.current.position.x = displacement;
conrod1Ref.current.rotation.z = moment;
plunger1Ref.current.position.x = displacement;
}
...
},
(state) => state.api.metrics
);