Retain instances in Viewport Frame with React
I would like to parent an instance to a viewport frame and ensure that it does not get destroyed when the parent element (a react viewport frame component) repaints. I am not very familiar with how repainting works or if it is even possible for the object to be destroyed unless the parent element is unmounted. What could I do to ensure the object does not get destroyed unless the parent viewport frame unmounts?
Just use clones
I can not use clones, it's an instance referenced by the server and I would like any attribute changes to be mirrored to the client. Although I know I can just clone the instance anyways and watch for attribute changes on the original instance, the purpose of this post is to ask whether there is any way to achieve the goal and parent the original instance to the viewport frame component.
Thank you in advance for the help.
18 Replies
Hmm, spitballing here. Maybe having a
memo component below which does the creation would work?
That way it never gets re-rendered
I don't think that :Destroy() is called on the instances, so you could maybe also have something like a useMemo (with no dependencies) that simply creates the instance, and then you can parent that every time in something like a useLayoutEffect or useEffect?Wait, useLayourEffect exists in Roblox react?
pretty sure..
GitHub
react-lua/modules/react/src/React.luau at df4b4072e3aa78fc64850f8ca...
A comprehensive, but not exhaustive, translation of upstream ReactJS 17.x into Lua. - jsdotlua/react-lua
Could you remind me when it's activated?
use effect is only after render completed
I went looking and I genuinely don't know sorry
I can trace to around here but not much further https://github.com/jsdotlua/react-lua/blob/df4b4072e3aa78fc64850f8ca8b696084f305d75/modules/react-reconciler/src/ReactFiberHooks.new.luau#L1369
maybe @Brooke knows better
I've seen some peoples hooks use it, so it must work somewhere
there is https://react.luau.page/api-reference/react/#reactuselayouteffect to read i guess
how would that ensure that the child object does not get destroyed on repaints/rerenders?
oh i see. so then react doesn't destroy elements on rerenders and only edits their values? is that correct?
Because it would never rerender
Sort of yeah, it's just changing the dom tree
ohh, you mean have the memo return a viewport frame jsx?
pretty much yeah. the parent might re-render but the child shouldn't iirc
might be a bit rusty on that stuff though
Hmm… would that work though? Doesn’t JSX only cause react to create an element if it’s rendered?
which would create the same exact issue as we had in the beginning no?
might have to play around with your problem when i get some spare time haha
very fair lol! also im sure other people have used viewport frames with react, so i wonder how they go about doing it safely?
i guess most people just clone the instances (from what i can tell by looking at other posts here)
yup
Yeah, I do it sometimes, btw here's the info about useLayourEffect
So it could be the thing you're looking for
a lot of that LLM stuff is gonna be somewhat useless since this is roblox and not the web dom
Fair enough, I think if the functionality is the same prob it could work