Reduce confusion of unsubcribe function by moving its location from 8a to 8b which is closer to when it get's used

pull/5975/head
gilgameshskytrooper 5 years ago
parent 189a5c6f8e
commit 41d6ecf2df

@ -6,9 +6,6 @@
let count_value; let count_value;
const unsubscribe = count.subscribe(value => {
count_value = value;
});
</script> </script>
<h1>The count is {count_value}</h1> <h1>The count is {count_value}</h1>

@ -25,5 +25,3 @@ function reset() {
count.set(0); count.set(0);
} }
``` ```
> The function of assigning subscribe to `unsubscribe` is explained in the next section.

@ -6,9 +6,7 @@
let count_value; let count_value;
const unsubscribe = count.subscribe(value => { // declare unsubscribe here
count_value = value;
});
</script> </script>
<h1>The count is {count_value}</h1> <h1>The count is {count_value}</h1>

@ -2,10 +2,17 @@
title: Auto-subscriptions title: Auto-subscriptions
--- ---
The app in the previous example works, but there's a subtle bug — the `unsubscribe` function never gets called. If the component was instantiated and destroyed many times, this would result in a *memory leak*. The app in the previous example works, but there's a subtle bug — it is missing an `unsubscribe` function. If the component was instantiated and destroyed many times, this would result in a *memory leak*.
One way to fix it would be to use the `onDestroy` [lifecycle hook](tutorial/ondestroy): Start by declaring `unsubscribe` in `App.svelte`:
```js
const unsubscribe = count.subscribe(value => {
count_value = value;
});
```
Although you declared `unsubscribe`, it is never called. One way to fix it would be to use the `onDestroy` [lifecycle hook](tutorial/ondestroy):
```html ```html
<script> <script>
import { onDestroy } from 'svelte'; import { onDestroy } from 'svelte';

Loading…
Cancel
Save