React Hooks tutorials for beginners-4

Image for post
Image for post
React

Welcome to part-4 of the series. You can find part-3 here. We will look into more ways to use the useEffect in this part.

In the last example, we had seen how to run useEffect conditionally. In this section, we will learn how to run useEffect only once. With this we are mimicking the lifecycle method componentDidMount().

First we will see an example of class based component. Create a new file ClassMouse.js inside the components folder.

Here, we are having a state storing x and y variable. We are then adding an event listener in componentDidMount(), which only triggered once during the initial render. It detect the mouse move and calls a function logMousePosition().

In the function logMousePosition, we are setting the state of x and y to the updated position.

Image for post
Image for post
ClassMouse.js

Now, include this component ClassMouse in the App.js file.

Image for post
Image for post
App.js

Now, move to localhost and move your mouse, the position will be updated.

Image for post
Image for post
Position updated

Now, we will implement the same with useEffect and functional components. Create a new file HookMouse.js inside the components folder.

Here, we first implementing the logic in a functional component. But, we have include an empty array as an parameter in useEffect. This tells react to call this effect only once during initial render.

Image for post
Image for post
HookMouse.js

We have included the HookMouse component in App.js and then after moving to the localhost, we can see the useEfect called only once, by the console log.

Image for post
Image for post
useEffect called once

In this section, we will learn how to mimic the componentWillUnmount() lifecycle method using useEffect hook.

To check the need for cleanup, we will create a new file MouseContainer.js inside the components folder.

Here, we are toggling the HookMouse component on click of a button.

Image for post
Image for post
MouseContainer.js

Also, include a console log in HookMouse.js, inside the logMousePosition function. This, will be printed every-time on a mouse event.

Image for post
Image for post
HookMouse.js

Now, include the MouseContainer component inside the App.js file.

Image for post
Image for post
App.js

Now, goto localhost and move the mouse. We will see the Mouse Event console log when we move the mouse. After that we are clicking on Toggle Display button, and then move the mouse, we will get a warning.

And the Mouse Event console log will still fire. Even though the component have been removed, the event listener which belongs to the component is still listening and executing.

Image for post
Image for post

Now, to fix it in class based components, we just need to have a removeEventListener in componentWillUnmount().

Image for post
Image for post
ClassMouse.js

To fix it in functional component, we will return a function from useEffect which will be executed when the component will be unmounted.

Here, we are adding a console log and the removeEventListener().

Image for post
Image for post
HookMouse.js

Now, we will move back localhost. Her after clicking on Toggle Display button, and then move the mouse, we will not get a warning or the Mouse event console log.

Image for post
Image for post
Component issue solved

This completes part-4 of the series. You can find part-5 here.

You can find the code for the same in this github repo.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store