React Hooks tutorials for beginners-3

Image for post
Image for post
useEffect

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

The useEffect hook, is the second most important hook and is used to do below.

  • The useEffect hook perform side effects like DOM update and API call, in functional components.
  • It is a close replacement for componentDidMount, componentDidUpdate and componentWillUnmount.

Now, we will directly look into an example to understand useEffect hook. I had create a new React project and created a file ClassCounter1.js inside src->components folder.

We are first seeing the example with a class based component. Here, we are updating a DOM element and setting it to the state variable count.

The componentDidMount() will run during the initial render and componentDidUpdate(), during every other time when the state is updated.

Image for post
Image for post
ClassCounter1.js

We have also added it to App.js file.

Image for post
Image for post
App.js

Now, in localhost whenever we click the button the text and the title both changes.

Image for post
Image for post
Both changes

Next, we will implement the same with useEffect. So, go ahead and create a file HookCounter1.js inside the components folder.

Here, we have added the logic to update the state with useState.

Image for post
Image for post
HookCounter1.js

Next, we will add the useEffect to change the document.title. The useEffect is combining both componentDidMount() and componentDidUpdate() and running after initial render and also, each update.

Image for post
Image for post
useEffect

Now, add it in App.js file.

Image for post
Image for post
App.js

Now, back in localhost we will see the same effect as a class based logic.

Image for post
Image for post
Same behaviour

We had just learned that useEffect hook runs after every render. But this can create performance problem, and in certain cases we want it to run conditionally.

We will first see the issue in class based components. Create a new file ClassCounter2.js, which is exactly similar to ClassCounter1.js, but have a text input which changes the state.

Image for post
Image for post
ClassCounter2.js

Now, head back to localhost and click on the button, which will update the document title and also show the first console log.

After that when we type inside the text field, it also runs the console log. It means the componentDidUpdate, was run unnecessarily 7 times and document.title updated with same value.

Image for post
Image for post
Document title

To fix this issue we will check in componentDidUpdate(), where the previous count is not equal to current count.

Image for post
Image for post
Conditional

Now, go back to localhost and first click on the button and then type something in text box. This time the console log for ‘Updating document title’ won’t be shown.

Image for post
Image for post
Conditional render

Now, we will implement the same with functional components. Create a new file HookCounter2.js, which is similar to HookCounter1.js but it contains a text field and the state to update it.

Image for post
Image for post
HookCounter2

We have also added it in App.js file. We will again see the same problem and the document.title will be updated unnecessarily.

Image for post
Image for post
Hooks unnecessarily

Now, we will fix it by conditionally run useEffect, only when the count value changes.

We do it by passing an array as a second parameter. Here, we will pass the props or the state variable depending on which the useEffect will run. In our case it is the count state variable.

Image for post
Image for post
Conditional

Now, in localhost when we click on the button, then only the useEffect will be run because that only changes the count variable.

Image for post
Image for post
useEffect

This completes part-3 of the series. You can find part-4 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