React Basics: Using the useState() Hook — Part 4 in a 4 Part Series

Over the last three blog posts, I’ve been exploring some of the basic concepts in React. Links to those blogs can be found below. In the last post, I dove a bit further into the use of hooks in functional components and how they can be used to capture, store and manipulate the state of a component. In this last part of the 4 part series on React, I’d like to look at the useEffect hook and how it allows us to run additional code once the ReactDOM has been updated in some way.

UseEffect is called every time a component re-renders and on every change to the component’s props or state. It’s important to note that the useEffect hook takes in two arguments. The first is a function containing some action that will happen whenever the useEffect is triggered, and the second argument is a parameter or a dependency that must be met in order for the useEffect to be triggered. It is the second argument, the dependency, that gives us a lot of variability in how and when our useEffect is called. Furthermore, in passing in a dependency, we can alter the useEffect to meet our coding needs, since it will only run when that requirement is met. This helps us control what happens to our component during different times in its lifecycle.

Let’s take a look at an example of using this hook in a functional React component. To start, I’ve pulled up the counter component that we built in the last blog (hyperlink here). It is essentially a component file called Counter.js that is imported and rendered in the main App.js. Here is what that basic functional counter component looked like:

Now, to add the useState hook, we first have to include it in our imports at the top. Since it is also a React component, we can just add it into our useState import statement.

Then, in the functional component below, we add the useState hook and pass in the two arguments. For simplicity’s sake, the first argument is an arrow function that will return an alert on the page saying, “You have clicked the button x times.” To get the current state or count in this case, we have to be sure to use wrap the statement in back-ticks as well as interpolate the value of count with a dollar sign and curly brackets. This should look as follows:

Easy enough, right? Saving that and taking a look at the web page, I get an alert every time that I click the Increase Count button:

The way it’s set up now, the alert will pop up every single time the component re-renders, including on the page load. In order to control this useEffect a bit better, we can add the second argument which is a dependency that must be met in order to trigger the function within useEffect. As an example here, if I only wanted the alert to go off when the count got to 10, then I would include an if statement inside of that first function such as if(count === 10) along with the bracketed alert function. The dependency that would be passed in would be the count. This would evaluate that dependency on each re-render and only run the alert if/when the count is equal to 10. Here is how that looks in the code:

On the page, the alert will only show once I click the button enough times to set the count equal to 10:

While this is a basic example of the useEffect hook, it outlines the basic concept of utilizing the function and the dependency that are passed in to alter or manipulate the component during different times in the component’s lifecycle.

Over the past four blog posts, we’ve taken a look at some of the fundamentals of React, including the difference between state and functional components, how to pass data down as props, how to use the useState hook to incorporate state into a functional component and, here, how to utilize the useEffect hook to alter a component during different stages of its lifecycle. These are all important and useful concepts when delving into React. I hope you’ve enjoyed the series. Happy coding!