DEV Community

Discussion on: Remove element from DOM in React way

Collapse
jfbrennan profile image
Jordan Brennan • Edited on

I barely learned hooks before I got off the train, so I have to map all of this to Vue to see what's what...

<template>
  <div><slot v-if="visible"></slot></div>
</template>

<script>
export default {
  props: ['delay'],
  data() {
    return { visible: true }
  },
  mounted() {
    setTimeout(() => {
      this.visible = false;
    }, this.delay);
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

The only thing I'm still wondering about is what you mentioned, "we told React to skip applying an effect", but useEffect is called once, setTimeout and its callback are called once...do effects run in a loop or something?

Collapse
chilupa profile image
Pavan Chilukuri Author • Edited on

Sure, If you are familiar with React class life cycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined. They don't run in a loop.