Optional onUnmount onMount functions for R3F nodes?

[mysterybear]

Hey

So the Three.js paradigm is lots of mutation... R3F kinda "declarative-ises" that, which is great... But then we still end up having to code Three.js style really (e.g. ref and mutate on materials, all kinds of stuff)

I wonder if an API like this would be possible:

{conditionalRenderingCondition ? (
  <SomeR3FNode // wraps mesh or group or something
    onUnmount={rootRef => {/* blah blah blah */}}
    onMount={rootRef => {/* blah blah blah */}}
  />
) : null}

onUnmount and onMount are optional props. The default is whatever the current behaviour is now (add/remove to scene via parent). I guess there could also be a preventDefault like with event handlers?

This would all afford the possibility of doing something like node.traverse on the root and then setting all the materials to visible={false}, avoiding having to re-compile materials etc

Thoughts? Cheers!

[mwmwmw]

Do this work in a useEffect hook. Then you can return a function that will execute when the component is unmounted.

Docs for useEffect
https://reactjs.org/docs/hooks-effect.html

useEffect(()=>{
 // do something 

 return ()=>{
   // do something on unmount
 }

})

Store the materials in a context and use a provider with a hook.

Something like this inside your component.

const materials = useMaterialsContext();
useEffect(()=>{
    materials.map(m=> {
     m.visitble=true;
    });
   return ()=>{
     materials.map(m=> {
     m.visitble=false;
    });
 }
})

Just an idea

[mysterybear]

Thanks for looking and replying @mwmwmw

Yeah, I am doing a lot of this kind of stuff (using valtio proxy stores, lots of subscriptions, hooks etc)

I just find that I miss conditional rendering... I just wondered if this idea (or something like it) would help recover conditional rendering in some places

[mwmwmw]

This seems all wrong somehow, but what about something like...

function ConditionalRender({, onMount = ()=>{}, onUnMount = ()=>{}, children }) {

  useEffect() {
      onMount();
      return () => {
         onUnMount();
      }
  }
  return <>{children}</>
}

Then

<ConditionalRendering onMount={/* do something with ref */} onUnMount={/* do something with ref*/} >
   <MyComponent ref={ref} />
</ConditionalRendering>

[mysterybear]

I think with this, the reconciler would still add/remove Three.js nodes, right?

The idea is to have some function prop that allows you to actually take over what the reconciler does

Similar to what we can do with event handlers, you know like preventDefault()? Like that... So you could stop R3F from actually removing a node from the scene graph on unmount

[mwmwmw]

Yeah, you're right. My brain just works that way now. I'm pilled.

You could do something like this

function ConditionalRender({ children }) {
  useEffect(()=>{
      console.log(children) // the fiber nodes
      return () => {
         // do something else
      }
  })
  return null
}

children will just be Fiber nodes though. So you'd have to manually check and create the objects.

But, you'd have complete control over the mounting / unmounting of objects in imperative code.

[mwmwmw]

Behold, the horror.

https://codesandbox.io/s/flamboyant-newton-d52ujg?file=/src/index.js

I don't even think this solves your issue. But, it does allow you to manage the objects in the three scenes directly.