React, Vue and Svelte: Comparing Lifecycle methods

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>