computations created outside a `createRoot` or `render` will never be disposed
Escaping reactivity contexts is presumably usually because of async operations.
Well, I create this effect inside an event handler. My component is attached to a specific part of the DOM, creating a small island of reactivity. However the event in question is a
keydown
event attached to the document.
a) Is this the cause of the warning or am I mistaken?
b) What is a good way to do this?
Docs talk about delegated events that are attached to the document, but dispatched to the element (uncessary in this case, but whatever).
But I tried <div onKeyDown={kbHandler}>
and it won't fire my handler.38 Replies
Have a look at from
Tnx, I will. Am I right about what causes the warning?
To be honest I'm still dubious.
from
should only be necessary for event listeners outside of the DOM
ExampleSolid Playground
Quickly discover what the solid compiler will generate from your JSX template
I create this effect inside an event handler.to be clear, you're calling
createEffect
inside kbHandler
yeah? if so the warning would be bc the event handler doesn't create a reactive root, so for the effect to dispose properly you need to call createRoot
and dispose it manuallyyou're calling createEffect inside kbHandler yeah?Correct.
To what end?
To, uh... use signals inside the handler?
What are you trying to accomplish?
Add a download progress bar to a page that doesn't have one. The download function has an onprogress callback, where I set the signal and I want to update UI as a response to that.
@Brendonovich I'm not sure what to do with
createRoot
. What about getOwner/runWithOwner?In
from
the produce
function gets a setter from a signal in the originating reactive context—can you make that work without a createEffect
inside the handler?
If you want to dispose the effect when the component unmounts then yeah you could use getOwner & runWithOwner
@peerreynders I am very new at solid and trying to parse what's going on.
Ah, I see. runWithOwner looks awfully similar to .bind() 🙂
Ah, it isn't...
I'm just trying to solve this problem without having to manually create and dispose of reactive contexts.
The problem seems to be that you want to affect change inside an existing reactive context from the outside. To some extent that is
from
does for events. createResource
/createAsync
is the typical way for async value changes (via promises) to enter a reactive context.That sounds good. Ok, let me try to parse the playground you gave first before trying the createRoot/runWithOwner route.
But I tried <div onKeyDown={kbHandler}> and it won't fire my handler.A
div
needs a tabindex
otherwise it can't take focus
https://playground.solidjs.com/anonymous/05c45974-252a-4b79-bb26-3b3927493e57Solid Playground
Quickly discover what the solid compiler will generate from your JSX template