Function calling twice | R3F

Questions
1

Hi there! I’m trying to show a popup onclick of a 3d model but the function is calling itselt twice and sometimes thrice.What am I doing wrong.

 <mesh
        ref={ref}
        castShadow
        {...events}
        {...props}
      >
        <Mymodel position={[0, 4.5, 0]} onClick={useCallback((e:any)=>confirm("I'm clicked"+props.uid),[props.uid])}/>
      </mesh>

I’m calling this model many times in my scene that’s why I’ve given every model a unique id (uid). onlclick of one model I want to see if thats the right id or not with respect to model.

1 Like
2

what means its calling itself twice? how would something call itself, like a loop?

other than that it doesn’t matter how often a component executes, amount of render cannot change behaviour, unless you have a bug/side effect. that’s why react deliberately double renders in dev/strictmode to flush out mistakes.

ps, you seem to be wrapping a model (probably a mesh or a scene) into a mesh. that wouldn’t make sense. castShadow won’t do anything unless it sits on a real mesh that has a material and a geometry. a mesh with a scene in it is like a group.

3

The issue is most likely that you need to add e.stopPropagation() at the end of your onClick callback.

When loading models, they usually consist of multiple shapes and all shapes that are behind the shape you are clicking will trigger the onClick event as well, unless you stop the propagation.