UseEffect Behind the scenes in React

Before knowing more about useEffect and deep understanding of react. I recommend you familiarize these concepts of javascript.

UseEffect with cleanUp function

In some cases we need to cleanup some funcionalities like promises.

We are going to deep into it with an example.

Create a timer and show it in the page.

We can do this with setInterval, but if we don't implement the cleanup, the timer will be consuming resources and the app will be slow.

So we have to return the clearInterval.

Here we have the code.

import {useState, useEffect} from "react";



export default function App() {

    const [time, setTime] = useState(0);





    useEffect(() => {

      const timer = setInterval(() => {

        setTime(time + 1);

        console.log('useEffect with cleanup Function');

      }, 1000)



      return () => {

        console.log('Running cleanup function');

        clearInterval(timer);

      }

    })





    return (

        <div>

           <h3>Timer {time}</h3>

        </div>



  )

}