How is Suspense supposed to be formatted?

[interpolack]

Hello!

When I enclose multiple objects inside of the same Suspense wrapper, then their pointer events all fire at the wrong times. But if I enclose each object in its own Suspense wrapper, then some of them fail to load.

Which is correct: one Suspense wrapper or many? How to ensure that objects appear when using many?

Pattern one: same Suspense wrapper

Problem: the wrong onPointerOver events fire; sometimes all of them fire at once

const [exampleState, setExampleState] = useState("C");

 const SampleObject = ({ onOver }) => {
    const ref = useRef();
    return (<mesh ref={ref} onPointerOver={onOver}>
       <planeBufferGeometry  />
       <meshPhongMaterial />
    </mesh>)
 }

// in render function
<Suspense fallback={null}>
                         <SampleObject
				onOver={() => {  setExampleState("A")  }}
                          />
                         <SampleObject
				onOver={() => {  setExampleState("B")  }}
                          />
                          // ...
</Suspense>

Therefore, when the state changes, all of these components re-render. I think this may be causing all of the onPointerOver events to fire at once.

Pattern 2: Each object in a differentSuspense wrapper

Problem: some objects fail to appear

[

<Suspense fallback={null}>
    <SampleObject onOver={() => {  setExampleState("A")  }} />
</Suspense>,

<Suspense fallback={null}>
    <SampleObject onOver={() => {  setExampleState("B")  }} />
</Suspense>

]

Do I need a different fallback function?

[drcmda]

im not sure what you mean tbh, pointers have nothing to do with events nor should they influence them. suspense allows you to orchestrate async components, you define loading boundaries. the way you treat events there looks odd to me.

• key='suspense1' why ... for what?
• what is images('./checkerboard.png').default ?
• onMouseOver={onOver} doesn't exist
• attach="geometry" & attach="material" aren't necessary
• onOver, onPointerOver={() => { setMiscState(true) }}, onMouseOver none of this makes sense, these events don't even get to the mesh

[interpolack]

hey, thanks for responding. sorry for including all of these idiosyncrasies and some confusing errors. i updated the question to fix them - the problem with mouse events vs failure to load still persists.