Side effects in useMemo

First I just want to say great work with this!

I was reading through the code and noticed that you’re calling world.createRigidBody inside useMemo which breaks some React rules since world.createRigidBody has side effects. useMemo isn’t the best choice for this anyway because React can decide to throw away the value at any time and recompute it.

https://github.com/pmndrs/react-three-rapier/blob/a4b9f3fb2ca40abea8f5dcd6d4c44068f60fe398/packages/react-three-rapier/src/hooks.ts#L94-L116

In my own integration I ended up using a getter which as far as I can tell should be React 18+ safe. The approach is described in the bottom of https://github.com/reactwg/react-18/discussions/18

https://github.com/alexandernanberg/playground/blob/973c512aa192a6500a503a15aea6d6dd1b83d2be/src/components/physics.tsx#L265-L272

[alexandernanberg]

with your permission of course

Sure, feel free to take anything that is useful 😄

Hm, supposedly we could initialize the rigidbody in useLayoutEffect to get around that…

I think I had to create both the rigidbody and collider in a useLayoutEffect to avoid “layout shift” (not sure what it’s called in a 3d context), was some time ago so don’t remember exactly why I had to do it that way

[alexandernanberg]

I’m still not convinced useMemo is the right choice here, since React can throw away the value at any time. A lazy state setter might be better (useState(() => createSomeApi(refGetter))), but technically it might still violate the React rules since you’re setting/getting the ref value in render (React 18 compatibility is hard 😅)