In our last week’s blog, we went over what React Hooks is and its use application on useState. This week we are going to dive in and take a look at what useEffect is and its application uses. If you haven’t yet learned about useState hooks, please read my previous blog which will cover some important information regarding to React Hooks and useState.
In React, we use complex components to manage states and query data, but it is not easy to manipulate these states and data within class because we are so dependent on the React Lifecycle Methods. Let us take a look at an example with React Lifecycle Methods and see its usage and complexity. Code snippet shown below is an example of how to query API data and display changed window size with class component based React Lifecycle Methods. We can tell right the way there is a lot of setups for this class component, everything from the constructor, componentDidMount, componentDidUpdate to componentWillUnmount, there are a lot of required written codes and very specific instructions to set them up.
Here is where React Hooks useEffect comes in handy, we can use it to provide a way to split this component, into smaller functions based on functionality, and less written codes. Let us take a look at the code snippet shown below, similar to useState, useEffect can be extracted and imported from React on line1, and we can use it right the way from line7 to line11. Basically in our example, we are trying to query some API data, based on the resourceType that we are clicking on, which means if we click on Posts, we want to generate a bunch of posts from an API, same goes for Users and Comments. We want our code to react to when we change the type of resource from Posts to Users, or Users to Comments. This is where line7 to line 11 comes in handy with useEffect, while inside of it, we pass in another callback function to fetch API data, and the second argument for useEffect is an array that we set to resourceType, this means that anytime resourceType is changed, we will re-render the page as well as trigger the useEffect function to run again to fetch our API data. After receiving the data in Json format, we are essentially using useState hook to store the data into an array called items. One side note to the second argument of useEffect, if we just pass in an empty array, it means useEffect will only run once when the component is mounted, which means no matter what changes there are for this component, the useEffect function won’t run again after its initial run time.
A lot of times when we query data or adding event listener on certain places, we want to make sure that we clean up our data / event listener after its uses. React hooks useEffect provides such feature, let us take a look at another example of code snippet shown below. Our previous example with class component Lifecycle Methods where the window size will change as the window shrinks or enlarges. We can use React hooks useEffect to catch the change and display it on screen with an event listener. The code itself is very self-explanatory, we set windowWidth using useState, and we display the windowWidth on our screen, while it is displaying the current windowWidth, we want to useEffect to record the size changes of windowWidth. By adding an event listener of resize inside useEffect, we also set the handleResize function to measure the current width of Windows. After the window resize is measured, we want to make sure that we clean up the event listener by returning an anonymous function within useEffect, line13 to line15 will make sure to remove the event listener so it doesn’t stay there after the component is unmounted, and slow down our app. This useEffect will only run once when its onMount, since we set the second argument of useEffect to an empty array.
There we have it, the basics of React Hooks useEffect feature. Of course there are a lot more to learn about useEffect and React Hook. Feel free to point out your thoughts and opinions or chat with me via LinkedIn! Thanks for reading and have a wonderful day!
https://programmingwithmosh.com/react/guide-to-learn-useeffect-hook-in-react/
