Passing JSX around: Computations created outside a `createRoot` or `render` will never be disposed
Alright folks, buckle in because this is a long one.
I've done some research through this channel already, searching for
computations created outside a first, and the closest thread to my problem is <#1176430732827172874> this one. This user is doing something similar to what I'm doing- I'm storing JSX elements in an array in a store in a context, and I'm just posting to that array every time a button is clicked, creating a new element each time the button is clicked. I then have a <For> component which will go through and render each of those components. This works fine! However I am running up against an odd bug that I truly do not know how to solve.
Trying to then access the context fails within these generated components, telling me that the context is undefined. Additionally, trying to create refs to elements within these elements fail. I have a couple of guesses as to why this is the case:
1. The components that I am generating dynamically do not have owners since they were created "out of scope" (i.e. at the click of a button). And without an owner, my guess is that solid doesn't know where the context is or what the current values of the context are with no frame of reference. Unfortunately, with my current pattern, I have no idea how to set the owner of these generated components manually.
2. As a react-first dev, Solid has a couple of oddities such as this. This type of pattern is possible in react because at the end of the day, elements in react are just a bunch of objects. Solid, to my understanding has a compiler, and this changes things.
I'll see if I can post a minimally reproducible environment, but this codebase is large and complicated it may take me a while to reproduce the exact bug I'm experiencing.6 Replies
the playground.. doesn't do this?
odd
damn that's really annoying
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
this works fine
this is what I want to happen. no warnings in the console
Just making the elements you are adding to the store functions should work I think
so instead of
addPanel(<Panel/>) you would do addPanel(() => <Panel/>)actually?
hang on
holy shit that's doing it 💀