How to cleanup using van.derive()?

[Ashvith10]

So far, the posts I've read across here does not address anything about React or Svelte-equivalent cleanups, so I was wondering if there's a alternative way to achieve this?

I am trying to re-write a React toy-project in VanJS, and I want to be able to call a function to stop a particular event.

[sirenkovladd]

Could you share an example of what kind of cleanup you are describing?

[Tao-VanJS]

How about this?

const gameRunning = van.state(true)
let ballManager

van.derive(() => {
  if (gameRunning.val) {
    ballManager = new BallManager(...)
    ...
  } else {
    ballManager.stop()
  }
})

You need to set gameRunning to false at some point of your app.

[sirenkovladd]

@Tao-VanJS, yes, this is exactly what I meant by sending signals from the parent element to the child that it should be unmounted

[Ashvith10]

@Tao-VanJS @sirenkovladd I am not sure if that would allow me to implement the follow React snippet in VanJS, which also makes use of useRef()?

[Tao-VanJS]

canvasRef is just a reference to a DOM element. In VanJS, you can achieve the same with a more straightforward way:

const canvasDom = canvas({width: 800, height: 800})

...
van.derive(() => {
  if (gameRunning.val) {
    ballManager = new BallManager(canvasDom, ...)
    ...
  } else {
    ballManager.stop()
  }
})
...

[Ashvith10]

@Tao-VanJS is there a simple working project that I can refer? Unfortunately after this discussion, I am still not sure on how to prevent memory leaks after page reload. Take the second snippet for example - since the value of gameRunning.val may never be set to false on reload or page-change, it would never be freed, right?

[Tao-VanJS]

When the page is reloaded, the memory will be automatically cleaned, so you don't need to worry about page reloads. In your application logic, you need to ensure ballManager.stop() is called whenever a new instance is created.

[Tao-VanJS]

@Ashvith10, btw: just as what @sirenkovladd mentioned, if you're looking for some managed solution of lifecycle events. Van Element might have what you want: https://van-element.pages.dev/learn/lifecycle.

[Ashvith10]

@Tao-VanJS thank you for sharing some pointers - my understanding of mounting and umounting was flawed, mapping them with manually allocated memory.

Looks like all of that complexity can be reduced, and I can track mounting and unmounting by following this example - the only thing that didn't make sense to me was the part about using "init" - why not just two states - "mounted" and "unmounted"?