SolidJS•5mo ago

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.

onMount(() => {
    document.addEventListener('keydown', kbHandler)
})

onCleanup(() => {
    document.removeEventListener('keydown', kbHandler)
})

onMount(() => {
    document.addEventListener('keydown', kbHandler)
})

onCleanup(() => {
    document.removeEventListener('keydown', kbHandler)
})

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

peerreynders•5mo ago

Have a look at from

martixy•5mo ago

Tnx, I will. Am I right about what causes the warning?

peerreynders•5mo ago

To be honest I'm still dubious. from should only be necessary for event listeners outside of the DOM Example

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Brendonovich•5mo ago

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 manually

martixy•5mo ago

you're calling createEffect inside kbHandler yeah?

Correct.

peerreynders•5mo ago

To what end?

martixy•5mo ago

To, uh... use signals inside the handler?

peerreynders•5mo ago

What are you trying to accomplish?

martixy•5mo ago

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?

peerreynders•5mo ago

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?

Brendonovich•5mo ago

const dispose = createRoot(() => {
  createEfffect(...)
})

const dispose = createRoot(() => {
  createEfffect(...)
})

If you want to dispose the effect when the component unmounts then yeah you could use getOwner & runWithOwner

martixy•5mo ago

@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...

peerreynders•5mo ago

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.

martixy•5mo ago

That sounds good. Ok, let me try to parse the playground you gave first before trying the createRoot/runWithOwner route.

peerreynders•5mo ago

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-3b3927493e57

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Gaming

Programming

computations created outside a `createRoot` or `render` will never be disposed