Tips on how to debug / avoid React-Three-Fiber race condition

Questions
, ,
1

Hey all, I have recently tried to use react-three-fiber and I really enjoy the productivity and simplicity for structuring code. However I ran into a racy bug and I was wondering if anyone had any tips on how to try to debug it / set up a more robust minimal reproducible example please :folded_hands:

I filed an issue over a week ago but it hasn’t received any comments on it yet.

In terms of mitigating it I think I’ll try to set up some kind of html element underneath the scene that should not receive any events and if it does receive an event then it will warn the user there is a bug that’s stopping them from using their cursor and to try reloading the page and hope the bug is not triggered… this is obviously maximum grossness but I don’t have the expertise or resources at the moment to try to dig into R3F / ThreeJS to try to debug it unless anyone has any hints.

Thank you so much :folded_hands:

Bug report: Race condition with onPointerMove of instancedMesh #3736

Hi all, really enjoying using react-three fiber after putting off learning about it for a while. I built a more complex application but was running into an intermittent bug. I’ve made a more minimal application which you can see here and that may show the bug for you.

Here’s a video of the intermittent behaviour:

https://www.youtube.com/watch?v=7aVIiTKgfQ4

I’m not sure but I think this is a react-three-fiber bug as I put some debugger points into the code and found that the intersect function would (when exhibiting the bug) not return any hits. I haven’t dug any deeper yet. I think this is a bug in R3F and not ThreeJS.

Any thoughts or help welcomed. Thank you :folded_hands:

2

how are you creating your events? are you using Instances and Instance from react-three/drei? Instances - Drei eg…

<Instances>

<Instance onPointerMove={handlePointermove} />

</Instances>
3

Hey thanks @Lawrence3DPK,

Current code is:

Perhaps I should use Drei instead?

4

I swapped to Drei and it looks like that’s fixed it, thanks @Lawrence3DPK!

5

nice, glad that solved it for you, I think the issue with your original code was possibly the dependencies of your useCallback eg…

useCallback(fn, [hovered, otherDeps])

including hovered as a dependency.

As the pointer move event changes so frequently the useCallback may not be needed at all but setting state that frequently can also cause performance issues, to get the most performance out of stuff like this it’s typical to use a state machine like zustand, otherwise just reducing it down to pointer enter and pointer leave with e.stopPropagation enabled