What is #useEffect?

useEffect is a react hook that allows you to handle side effects in functional components.

Now that may sound vague, but let’s break it down, shall we?…What really are side effects?

A "side effect" is anything that affects something outside the scope of the function being executed.

Examples of side effects in react are:
i. Data Fetching
ii. Updating the DOM (Document Object Model)
iii. Attaching event listeners

Why do we use the effect hook?

useEffect is a way of telling react to run a function anytime a component renders or re-renders based on prop or state changes.

It replaces componentDidMount, componentDidUpdate, componentWillUnmount in class lifecycle methods.

How does useEffect work ?

useEffect function is defined inside the component. This way, we can access a components variables, state and props without having to write any additional code.

import React, { useEffect } from "react"

function UseEffectExample() {
  // the effect hook runs when there is a change in input
  useEffect(() => {
    // the function that runs within the effect
    effect()

    return () => {
      //the function that cleans up
      cleanup()
    }
    // input represents the dependency array
  }, [input])

  return (
    <div>
      <p>This is a useEffect Example</p>
    </div>
  )
}

export default UseEffectExample

By default, useEffect runs when a component initial renders as well as when it re-renders.

However, if useEffect function runs every time a component renders/re-renders, this may/will cause the application to perform poorly.

We need a way to tell react when we want the useEffect function to render. That is, a way to conditionally render effects.

This is possible with the dependency array.

What do we mean by a dependency array?

  useEffect(() => {
    // the function that runs within the effect
    effect()

    return () => {
      //the function that cleans up
      cleanup()
    }
    // input represents the dependency array
  }, [input])

The dependency array is what allows you to specify the props/state/values that you want react to watch out for. Only when there is a change in the value specified will the effect hook run.

If there is no change in the any of these values, the effect hook won’t run.

Amazing right? One more thing to note is that...

If the dependency array is empty, that is [], you are telling react that this useEffect doesn’t depend on any props or state and should only run when the component mounts.

useEffect Clean up

It is useful to clean up after running a useEffect because a component could possible be unmounted and you wouldn’t want to be running a side effect when the component is really not there.

Also, if you have event listeners running within a useEffect, it would be useful to clean up these event listeners.

In Summary, to use the Effect Hook in React,

i. Import useEffect from React
ii. Call it within the component and pass in a function which has to be executed after every render of that component.
iii. Specify the dependency array(if necessary)
iv. Clean up

Thank you for reading and I hope you found this helpful.