Lifecycle in...
React
import { useEffect } from 'react';
const Component = () => {
useEffect(() => {
console.log("the component is now mounted.")
},[])
}
import { useEffect } from 'react';
const Component = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("the component is updated.")
},[count])
}
import { useEffect } from 'react';
useEffect(() => {
//your code goes here
return () => {
//your cleanup code codes here
console.log("the component is destroyed.")
};
},[]);
Vue
Link
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
console.log("the component is now mounted.")
})
</script>
<script setup>
import { onUpdated } from 'vue';
onUpdated(() => {
console.log("the component is updated.")
})
</script>
<script setup>
import { onUnmounted } from 'vue';
onUnmounted(() => {
console.log("the component is destroyed.")
})
</script>
Svelte
Link
<script>
import { onMount } from 'svelte';
onMount(() => {
console.log("the component is now mounted.")
});
</script>
<script>
import { afterUpdate } from 'svelte';
afterUpdate(() => {
console.log("the component is updated.")
});
</script>
<script>
import { onDestroy } from 'svelte';
onDestroy(() => {
console.log("the component is destroyed.")
});
</script>
Top comments (0)