Introduction
Approximately two months ago, I began using REACT to further my software developing skills. It was the core of my phase 2 curriculum at Flatiron school, and quickly I discovered some incredible benefits to using REACT. However, this blog is not about the entire database of REACT, but one of the powerful features - the useEffect hook.
What is the useEffect hook?
The useEffect hook allows us to run additional code in our REACT component which is not triggered by a user input, like a form submission, or click. The hook allows us to handle side effects when a component is called upon. For example, useEffect might be used to GET information from an API that you would like to display on your page. Rather than making a user click a button to see the information, it can be displayed on the page right from the start of the application. This helps with data, like current weather, or fetching the most up to date user information from an API so it is ready to use within an apps page. Side effects are changes caused in our application outside of a function itself and can be very helpful.
By using the useEffect hook in a component, it tells REACT to perform another task after rendering all the components and building the DOM elements from the components JSX. (Remember, components return JSX.) useEffect will be called when a component is rendered and tells REACT our component will need to perform another task after rendering.
Starting with useEffect
In order to use the useEffect hook in a component, we must first import it to our component. The following code will import useEffect into our component, just like other hooks.
import React, { useEffect } from "react";
Now, we need to insert useEffect into our component like so:
import React, { useEffect } from "react";
const Component = () => {
useEffect()
return (
<div>
<div>
)}
Passing useEffect a Callback Function
In order to get our useEffect hook running we must pass it a callback function, which will run as a side effect. This function will be the first argument we pass useEffect and can look like this:
import React, { useEffect } from "react";
const Component = () => {
useEffect(() => {})
return (
<div>
<div>
)}
The Second Argument - A Dependencies Array
If we only use the code we have created above, we can run into an issue. This is because useEffect will run every time our component renders. This can be an issue, for example, if we only need to fetch data from an API when our app or component first renders. It would not make sense to have our app continuously fetching data every time state changes. This could slow down other processes occurring in our app or cause errors. Possibly, we might only want useEffect to run when a specific variable changes. Both of these scenarios are easily solved by placing a dependencies array as a second argument in useEffect.
If we want to tell REACT we only want our side effect to run the first time our component renders, we can simply pass an empty array like so:
import React, { useEffect } from "react";
const Component = () => {
useEffect(() => {}, [])
return (
<div>
<div>
)}
If we want to tell REACT to run our side effect when a variable changes, we simply pass the variable into the array like so:
import React, { useEffect } from "react";
const Component = () => {
useEffect(() => {}, [someVariable])
return (
<div>
<div>
)}
We can even pass multiple variables, separated by a comma if we would like.
Lastly, if you would like our sideEffect to run every time our component renders (like when state or props change), don't include the dependencies array at all. Here is a brief overview to simplify everything we just explained.
useEffect(() => {}) No Dependencies Array = We will run the side effect every time our component renders including when state and props changeuseEffect(() => {}, []) Empty Dependencies Array = Our side effect will run only the first time our component is rendered. useEffect(() => {}, [variableOne, variableTwo]) Dependency Array with Elements = Our side effect will run any time the variable(s) change.
Cleaning Up
The last great feature of the useEffect hook which we will cover is the ability to "clean up." Sometimes we might have a component which runs continuous code, like a timer, or clock. We may only want this code to run when we display the component. For example, a user might have the ability to hide or show this component, and we do not want the code to continuously run while it is hidden. This could use memory and resources we would like to have elsewhere in our application. It might also cause a "memory leak" which we will likely get an error message for. Thankfully, we can use clean up in our useEffect hook to prevent our code from continuously running.
In order to cleanup, we simply insert the following code into our callback function: return function cleanup() {clean up code goes here} This will allow us to stop the timer for example when it is hidden from the screen, or when a different component is rendered where we no longer need the timer to continuously count.
Conclusion
Over all, the useEffect hook is very handy and quite simple to use. It allows use to handle side effects outside our components and start/stop tasks from only being handled when certain variables change.
For more information on using the useEffect hook, I would encourage you to visit the REACT Documents here.
