In my last post, we talked about hooks and useState hook. In this post, we'll be taking a look at useEffect and useContext hook.

useEffect

The useEffect hook is very important to understand when working with React. It is used to run a reaction to a change in the lifecycle of a component.

Lifecycles of a React component

To understand useEffect better, we'll look at the 3 common lifecycles of a react component.

Component mounts (componentDidMount) - This is the first cycle of a component. This happens when a component is added to the DOM.
Component update (componentDidUpdate or shouldComponentUpdate). This happens when there's an update in a state or props.
Component unmounts (componentWillUnmount). This happens when a component is removed from the DOM.

Working with useEffect

The useEffect hook accepts a callback function that React will run, and optionally a dependency. When we don't pass a dependency to a useEffect, then the function in the useEffect will run every time the component re-renders. A change in a state or props can cause a component to re-render (componentDidUpdate)

In the example above, whenever we click on the button, the component updates, and when you open the console you'll see that a message keeps logging. That is because we're telling react to show that message whenever our component re-renders.

Using dependency

The dependency is passed in as an array. When we pass a dependency to useEffect then we're telling React to do something whenever there's a change in that dependency (for example a state), if we pass an empty dependency, then we're telling React to only run the function in our useEffect once, that is when the component mounts (componentDidMount). For example

In the example above, we have two useEffects, one has an empty dependency, the other has a dependency, When you check the console, notice that when you update the count state it just updates the number, nothing special is going on. This is because it isn't a dependency in the useEffect, but, once you start typing in the input field. There's an update in the console, this is because we used the name state as a dependency in our useEffect. Also, there's a message in the console that displays just once (when that component mounts).

Using useEffects for cleanup

There are times you'd need to clean up your code after an effect for example to avoid stacking up some event that could slow down our app or avoid a memory leak. For example, if you added an event listener to your app, you might want to remove it after the component unmounts (componentWillUnmount). To do that you can return a cleanup function to the callback in your useEffect.

useEffect(() => {
   ref.addEventListener("touch", aFunctionToCall);
    return () => {
       ref.removeEventListener("touch", aFunctionToCall)
    }
}, [])

This example will remove the event listener added to a particular element whenever the component is unmounted.

Conclusion

This is the very basics usage of useEffect. To delve deep into useEffect, Here's A Complete Guide to useEffect written by Dan Abramov.

In my next post, I'd be looking at the useContext hook.
If you enjoyed this post please like and share. If you have questions please feel free to drop them in the comments section. Keep coding and doing amazing things.

Understanding useEffects in react