hakowork/vide
3
0
Fork 0
mirror of https://github.com/centau/vide.git synced 2026-08-20 14:41:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Try improve crash course

Browse source
This commit is contained in:
Aaron Smith 2023-11-21 18:48:47 +00:00
parent c288cb92c4
commit 338c66ed57
11 changed files with 223 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

26
docs/tut/crash-course/10-cleanup.md
View file

@ -2,8 +2,7 @@
Sometimes you may need to do some cleanup when destroying a component or after
a side-effect from a source update. Vide provides a function `cleanup()` which
is used to register a cleanup callback for the next time the reactive scope
it is called in re-runs.
is used to queue a cleanup callback for the next time a reactive scope re-runs.
```lua
local mount = vide.mount
@ -33,18 +32,33 @@ end
local unmount = mount(Timer)
unmount() -- all registered cleanups are ran, heartbeat connection stopped
unmount() -- all queued cleanups are ran, heartbeat connection stopped
```
In the above example, this allows us to disconnect the heartbeat connection
when the timer component is destroyed, whether that is from unmounting the app
or if it is dynamically created by a control-flow function, which will be
covered next.
when the reactive scope responsible for creating the timer component is
destroyed, such as when it is unmounted.
Vide does not see "components", it only sees reactive scopes and how they are
linked together. Components are just a user pattern that creates UI instances
alongside effects. In other words, instances are just a side-effect of the
reactive graph. When a reactive scope is created, you create a corresponding
instance to display that data, when that reactive scope is destroyed, any
cleanups queued will be ran and take care of anything that needs to be, such
as disconnecting connections.
This is another reason why `mount()` is used at the top level of your app, so
that any registered cleanups created by your app components can be ran when
they are destroyed.
Side note: Roblox instances do not need to be explicitly destroyed for their
memory to be freed, they only need to be parented to `nil`. So there is no
need to use `cleanup()` to destroy instances. However, be wary of connecting
a function that references an instance to an event from the same instance,
this causes the instance to reference itself and never be freed. In such a case
you would need to use `cleanup()` to disconnect this connection or to explicitly
destroy the instance.
The reactive graph for the above example:
```mermaid