React Hooks — useEffect
Managing Side-Effects in Functional Components
In React class components, we have lifecycle methods available to us. The best way I have heard lifecycle methods described is what happens to a React component from its birth to its death² (if you haven’t heard of Mosh Hamedani before, check him out, especially his ‘What Is Javascript’ tutorials on Youtube). As we move from class components to functional components, we still need to handle side effects of a component in the stages of it’s ‘life’ (updating the DOM, clearing the Dom, fetching data from an API endpoint, etc), but methods like componentDidMount, componentWillUnmount, and componentDidUpdate become unavailable to us. Enter another incredible React Hook — useEffect.
I’m going to walk through a few basic examples of useEffect, but please visit the links below for more information directly from React, or the multitude of easy to follow videos on the subject.
While working on this blog, I also learned about a great Visual Studio Marketplace for ReactJS snippets: https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets It gives you quick shortcuts for anything from small state objects to building an entire skeleton for a functional or class component.
Let’s start with a building a basic counter. We will implement the useState hook here for access to state in our functional component, making sure to import useState from React. If you are new to useState, I have a blog piece on it here. We will return a button in our div tag when the component is rendered. The synthetic event of onClick will increment our counter by one every time that it is clicked.
Lets say we want to change the title of our document every time the counter button is clicked. In a class component, we would use the lifecycle method componentDidUpdate, but in our functional component, we will now have access to the hook ‘useEffect’. First, import useEffect from React. Our return ill stay the same, but we will build the useEffect function and set the document.title to equal `You clicked count ${count} times`, with count being the dynamic state of count as it increases each time we click our button on the DOM. As the value of count’s state updates, so will our document.title. useEffect runs after every render of the component, and because React renders anytime there is a change to the code, useEffect will execute each time the component is mounted and re-rendered.
When you only want to do something when a specific element on your page changes, you will want to incorporate useEffects second parameter, aka the dependency array. This second parameter is always an array, and whatever is passed into this array, when the value of this variable is changed, the useEffect hook will be run. Below, I have shown what happens when you use this second parameter to tell useEffect to only run when the count is changed, in the first picture you can see that as the count changes, the color of the text changes from it’s original ‘yellow’, and the document.title changes. In the second picture, if I change the dependency array to specify ‘color’ and comment out the onChange functions part of the body that changes color, the text color of the button never changes from it’s original ‘orange’ and the document.title never increases, bc it’s reliant on the state of the color changing.
If you would like a side effect to ONLY happen upon component mounting, simply change this second parameter of useEffect to be an empty array. In the picture below, you can see that with that empty array determining the dependency, although the button is clicked multiple times, the document.title never changes. I did, however specify to change the background color of the div when the component mounted, and recognizing that this was a part of the function solely based on mounting, it changed the background color.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
React | Using The Effect Hook| https://reactjs.org/docs/hooks-effect.html
- Mosh Hamedani | React Lifecycle Methods — A Deep Dive | https://programmingwithmosh.com/javascript/react-lifecycle-methods/
