devagr Comments - Answer Overflow

devagr

Explore posts from servers

TTCTheo's Typesafe Cult CCConvex Community

•Created by Amir Hossein Hashemi on 4/25/2025 in #support

Understanding `createRoot`

you can register cleanups inside any owned scope using onCleanup. these are also called when the owner of the scope is disposed

19 replies

SSolidJS

•Created by Amir Hossein Hashemi on 4/25/2025 in #support

Understanding `createRoot`

computation is an umbrella term for every signal/memo/effect/whatever else

19 replies

SSolidJS

•Created by Amir Hossein Hashemi on 4/25/2025 in #support

Understanding `createRoot`

maybe non-tracked is not the most accurate terminology

19 replies

SSolidJS

•Created by Amir Hossein Hashemi on 4/25/2025 in #support

Understanding `createRoot`

roots only track creation, not reads. effects/memos track both.

19 replies

SSolidJS

•Created by Amir Hossein Hashemi on 4/25/2025 in #support

Understanding `createRoot`

untracked as in it doesnt track signal reads like memos and effects. so

const [count, setCount] = createSignal(0)
createEffect(() => {
   console.log(count()) // tracks count, reruns on update
})
createRoot(dispose => {
  console.log(count()) // doesn't track count, never reruns
})

const [count, setCount] = createSignal(0)
createEffect(() => {
   console.log(count()) // tracks count, reruns on update
})
createRoot(dispose => {
  console.log(count()) // doesn't track count, never reruns
})

19 replies

SSolidJS

•Created by Amir Hossein Hashemi on 4/25/2025 in #support

Understanding `createRoot`

<For will create a root for each array item and dispose them if the item is removed from the array

19 replies

SSolidJS

•Created by Amir Hossein Hashemi on 4/25/2025 in #support

Understanding `createRoot`

you'd rarely need to use createRoot yourself, because it's done automatically under the hood of things like <Show and <For for example a <Show component creates a root and renders the children inside it. If the when condition changes, it will dispose that root, and create a new one to render the fallback. if it changes again, it disposes the fallback root and creates a new one for the children.

19 replies

SSolidJS

•Created by Amir Hossein Hashemi on 4/25/2025 in #support

Understanding `createRoot`

this is why you can just create reactive stuff inside components without every having to worry about unsubscribing/disposing like you do with other reactive systems like rxjs. roots are first class mechanisms to track everything created inside a function scope and dispose them all together. unowned scope basically means that there is nothing keeping track of what you create, so if you create reactive stuff it will basically live forever

19 replies

SSolidJS

•Created by Amir Hossein Hashemi on 4/25/2025 in #support

Understanding `createRoot`

let's get a little more basic. taking the example of rxjs. when you subscribe to something with rxjs, you get a subscription object back with a method to dispose the subscription

const btnClicks = fromEvent('.button', 'click')
const sub = btnClicks.subscribe(() => console.log("button was clicked"))
... sometime later
sub.unsubscribe()

const btnClicks = fromEvent('.button', 'click')
const sub = btnClicks.subscribe(() => console.log("button was clicked"))
... sometime later
sub.unsubscribe()

without owners, the equivalent in solid would look like this

const [count, setCount] = createSignal(0)
const effect = createEffect(() => console.log(`Count is`, count()))
... sometime later
effect.dispose()

const [count, setCount] = createSignal(0)
const effect = createEffect(() => console.log(`Count is`, count()))
... sometime later
effect.dispose()

this level of manual disposal is easy to forget to do, you'll see a bunch of articles around this topic in angular+rxjs land. Every subscription you create needs to be manually disposed. Roots fix this by inverting control

createRoot(dispose => {
  const [count, setCount] = createSignal(0)
  createEffect(() => console.log(`Count is`, count()))
  createEffect(() => { ... })

  ... sometime later

  dispose() // this will dispose both effects
})

createRoot(dispose => {
  const [count, setCount] = createSignal(0)
  createEffect(() => console.log(`Count is`, count()))
  createEffect(() => { ... })

  ... sometime later

  dispose() // this will dispose both effects
})

Now everything created inside the root will dispose automatically when you dispose the root.

19 replies

SSolidJS

•Created by Amir Hossein Hashemi on 4/25/2025 in #support

Understanding `createRoot`

createMemo and createEffect create an owned scope. every reactive primitive will create an owned reactive scope. the unowned scopes will be the logic outside of components in the global scope, in event handlers, and anything async (like promise.then)

19 replies

SSolidJS

•Created by Amir Hossein Hashemi on 4/25/2025 in #support

Understanding `createRoot`

i can help here but i see ryan is typing, i'll let him finish

19 replies

CCConvex Community

•Created by devagr on 4/3/2025 in #support-community

`convex dev` can't reach server

yeah got back on regular wifi and the issue is gone

44 replies

CCConvex Community