When we removed the component from DOM, the onDestroy() method is used. We need to call it before the component is removed from the DOM.
Let's create a new component, DateAndTimeComponent.svelte and add the following code.
<script>
import { onMount } from 'svelte'
let tasks = []
const url = 'http://time.jsontest.com'
onMount( async () => {
fetch(url)
.then( response => response.json() )
.then( data => { tasks = data } )
});
</script>
<table>
<thead>
<tr>
<th>Date</th>
<th>Epoch Time</th>
<th>Time</th>
</tr>
</thead>
<tr>
<td>{tasks.date}</td>
<td>{tasks.milliseconds_since_epoch}</td>
<td>{tasks.time}</td>
</tr>
</table>
We have only implemented the onMount() lifecycle function. If you are not aware of onMount then please visit the following article.
And in the App.svelte add the following:
<script>
import DateAndTimeComponent from "./DateAndTimeComponent.svelte";
let showComponent = false;
</script>
<main>
{#if showComponent}
<DateAndTimeComponent />
{/if}
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>
If you visit the webpate http://localhost:5000 then you'll see an empty page because showComponent variable is false at the moment.
Lets add a button to show the component. onMount will only be called once when the component is loaded to the DOM.
In the App.svelte, add the following under the main tag.
<script>
....
..
..
..
</script>
<main>
<button on:click={ () => showComponent = !showComponent }>Show Component</button>
{#if showComponent}
<DateAndTimeComponent />
{/if}
</main>
And in the DateAndTimeComponent.svelte we'll add the onDestroy lifecycle function.
<script>
import { onMount, onDestroy } from 'svelte'
let tasks = []
const url = 'http://time.jsontest.com'
onMount( async () => {
fetch(url)
.then( response => response.json() )
.then( data => { tasks = data } )
});
onDestroy( () => {
console.log("Date Component removed")
});
</script>
<table>
<thead>
<tr>
<th>Date</th>
<th>Epoch Time</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>{tasks.date}</td>
<td>{tasks.milliseconds_since_epoch}</td>
<td>{tasks.time}</td>
</tr>
</tbody>
</table>
Take a look at import { onMount, onDestroy } from 'svelte'
and
onDestroy( () => {
console.log("Date Component removed")
});
Top comments (0)