The problem is that I have onPointerOver and onPointerOut triggered on each child element, but I need it to be on a common group, because then the component is re-rendered too often.
There is a group here, and now when I move the mouse cursor, the component is redrawn many times, I want my state to change only 1 time when I move the mouse cursor and move it away.
This is changing, but the fact is that my head consists of many InstancedMesh, and it turns out that this state changes for each square that my head consists of.
How do I make this work only for the entire group, that is, so that when I hover the cursor, it only reacts to the entire group, and not to individual squares?
<group
position={position}
onPointerOver={(e) => {
e.stopPropagation();
handlePointerOver(e);
}}
onPointerOut={(e) => {
e.stopPropagation();
handlePointerOut(e);
}}
>
<Head scale={scale} isVisibleGrid={isVisibleGrid} position={scaledPosition(0, 24, 0)} />
</group>
const handlePointerOver = (e: ThreeEvent<PointerEvent>) => {
setIsVisibleGrid(true);
e.stopPropagation();
};
const handlePointerOut = (e: ThreeEvent<PointerEvent>) => {
setIsVisibleGrid(false);
e.stopPropagation();
};