Behind the useState hook, useEffect is arguably the most important React hook there is. React functional components allow for the usage of hooks which subsequently allows for less code being written do to how the hooks are set up to work. The useEffect hook replaces its Class Component based counterparts, componentDidMount, componentDidUpdate and componentWillUnmount, also known as lifecycle methods. With useEffect replacing three different functions, you can see how it inevitably leads to cleaner code as I mentioned above.
In the React course the example used to explain the functionality of useEffect was a login screen.
The use case of the hook worked in tandem with the useState hook. The form used state to determine whether or not the user was logged in. Once the user entered an email and a password, as long as it met the minimum requirements (more on that later) they were able to log into the app.
From a functionality standpoint the app works as expected. State is managed and validated inside the component as it is coded. However, should the user refresh the page or should the component re-render in any way. The logged in updated state would be refreshed as well. Herein lies the problem where useEffect is the solution.
Enter in localStorage. localStorage is a built in javascript function. In the practice example we use localStorage to maintain the users logged in status. If you want to learn more about the localStorage function you can here. For sake of simplicity and time I’ll spare you the how localStorage works, but I will go into how we use it in this practice project. localStorage itself doesn’t do much, however localStorage paired with a method is where it really shines. In this practice project we use two methods setItem and getItem. These two methods then have two arguments, a key name and a key value.
In our setItem localStorage function call, we set our key name to ‘isLoggedIn’ and our key value to 1.
Note: the key name and key value can be named whatever you want, so long as you reference it in the getItem call and it makes sense to you of course.
In our getItem localStorage function call, we set our key name to ‘isLoggedin’ as well. Only this time, we don’t set a key value. This is because we do not need one in this instance. We are only interested in referencing the two function calls to one another. So getItem looks for a setItem with the same key name and uses it.
Now to the star of our show, useEffect. The useEffect hook takes in two arguments. The first is a function which is known as the effect and the second is an array of dependencies.
In our practice project the goal was to save the logged in state to localStorage using the useEffect hook so that until the user hits Logout, they will remain logged in, regardless of if the page refreshes or the component re-renders.
This was accomplished by writing a conditional function inside of our useEffect hook. That set our setLoggedIn state to true.
In the example above the useEffect hook is being used alongside useState. The users login state is false on the initial render of the component (componentDidMount). The useEffect hook doesn’t come into play yet because its condition is not true at the moment. So let’s move on to our loginHandler function. Our loginHandler function once executed does two things. It sets our setIsLoggedIn state to true, which allows us to move to the Welcome Back screen from above. Secondly it sets our localStorage as mentioned above. This is where our useEffect hook comes into play. Inside of our hook we have a variable called userLoggedIn that uses our localStorage getItem to pair itself to its setItem counterpart. We then have a conditional that says, if the key value of userLoggedIn is equal to 1, then setIsLoggedIn to true. So the loginHandler function changes the state of isLoggedIn from false to true on the initial component mount, where our useEffect hook now sets it to true on page refresh, components re-rendering (componentDidUpdate) and any other condition until we say not to. Which we do in our logoutHandler function
The useEffect hook is very dependable as you can already see. It also goes into hyperdrive when paired with dependencies (Zing! I’ll be here all week). The dependency parameter comes into play when a function is placed inside the array. The hook is then looking to evaluate that function or those functions and if there’s a change it will re-render.
The code above evaluates the entered email and password. It is dependent on the setFormIsValid state function, as well as the enteredEmail and enteredPassword validation functions. useEffect is constantly evaluating these functions for a change and remounting the component when necessary.
React hooks haven’t been very easy to grasp for me. But I do understand the importance of understanding them. The useEffect hook is something you can’t get away with not knowing. With the understanding I have of how to use it, I tried to break it down as simple as possible. Please note that there may be an easier more efficient way to explain this hook than how I did, but this was the simplest way for me. I hope you enjoyed, look forward to sharing more with you soon.
For more information on how the useEffect hook works please visit the official React JS docs here
