What is UseEffect Hook?

✨ ReactJS | useEffect Hook | CleanUp ✨

WHAT IS THE USE-EFFECT HOOK?

useEffect hook is part of React’s Hooks API. The Effect Hook lets you perform side effects in functional components and runs when the component is mounted. The useEffect hook is a smooth combination of React’s lifecycle methods like componentDidMount, componentDidUpdate and componentWillUnmount.

useEffect accepts two arguments. The first argument passed to useEffect is a function called effect. Below is an example.

useEffect(() => { 
    console.log("Effect ran"); 
  }); //No second Argument

The second argument is a an array of dependencies. If you want to control when the effect runs after the component has been mounted, pass an array of dependencies as the second argument. Dependencies are values defined outside useEffect but used inside useEffect, such as:

const[state, setState] = useState(0); 
         useEffect(() => { 
              console.log(state); 
              // since we are using state, we have to pass it as a dependency 
         }, [state])

WHAT IS A SIDE-EFFECT?

The useEffect Hook allows you to perform side effects in your components. For example, tasks like Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects.

There are two common kinds of side effects in React components: those that don’t require cleanup, and those that do.

WHAT IS THE USE-EFFECT CLEANUP FUNCTION?

The useEffect cleanup is a function in the useEffect hook that allows us to tidy up our code before our component unmounts. When our code runs and reruns for every render, useEffect also cleans up after itself using the cleanup function.

The syntax of useEffect is:

useEffect(callbackFunction, dependencies)

Any returned function in callbackFunction serves as a cleanup function like this:

useEffect(() => {
        effect
        return () => {
            cleanup
        }
    }, [dependencies])

The cleanup function prevents memory leaks and removes some unnecessary and unwanted behaviors. Some examples of when you use cleanup:

1. CLEANING UP WEBSOCKET CONNECTIONS

When you create a WebSocket connection, you can close it in the cleanup function. Here’s how:

useEffect(() => {
  const socket = new WebSocket("url", protocols)
  // do what you want with the socket
return () => socket.close()
}, [])

With this, you won’t leave socket connections on (and potentially create unlimited connections) when a component unmounts.

2 .CLEANING UP TIMEOUTS

When you declare a setTimeout, you can cancel it when the component unmounts. Here's how:

useEffect(() => {
  const timeoutId = setTimeout(() => {
    // do something in the timeout
  }, 3000)
return () => clearTimeout(timeoutId)
}, [])

With this, you don’t have to worry about uncompleted timeouts when the component unmounts because they will be canceled.

CONCLUSION

The cleanup function in useEffect is a handy function that gives us as much power as class components. There's the componentWillUnmount lifecycle method in class components, triggered when a component is about to unmount.

This cleanup function helps us clean up side effects that are no longer needed when a component unmounts. Such things include API requests, timeouts, socket connections, etc.