I have a simple custom component in Svelte, where I use reactivity to execute some code.
<script lang="ts">
export let liked: boolean
$: {
//..code that should be executed when liked is toggled ...//
}
</script>
My problem is that when the component first mounts liked is toggled and the code is executed which is not what I want, I want to execute the code only when the user initiate the toggle.
That is why I added this initial variable here, which is making my code work as expected, but was wondering if there is a more idiomatic/clean way to do this?
<script lang="ts">
export let liked: boolean
let initial = true
$: {
if (!initial) {
//..code that should be executed when liked is toggled ...//
} else {
initial = false
}
}
</script>
likedflag set?likedin a conditional block, given it is ofbooleantype?likedis just a prop, that use bind:liked in the parent. If a user clicks on the like button then I do some transition on the component but I also trigger a popup for 2 seconds, which if I don't guard with theinitialvariable is triggered to all components when they mount.