React useEffect Hooks: A Guide For Beginners

React is a user interface javascript library. Components of React are reusable as they are isolated pieces of code. To build a complete React application, multiple components come together. These components can be created in two ways, using a functional or class component. We can see many React developers feel comfortable and easy to use functional components over class components.

React version 16.8 has brought many new exciting features known as Hooks. Many standard in-built hooks like isolates side effects, states, performance improvement, creating references, etc., are provided by React. In React, we create custom hooks, creating a reusable piece of code that can be used in an app at several places.

In this article will talk about React useEffect hooks.

Every time the component renders many factors such as the side effects, passing props to the component and defining and updating state values inside a component, it runs the rendering logic.

Syntax:

react use effect syntax

The first argument is the callback function, which cleans up the side effect, for example, stop timer, remove listener, unsubscribe, etc.
The second argument is a dependency array which decides when to call the side effect. This second argument is optional.

We all are aware of updating states and passing props to child components, so let’s focus on the Side Effects. UseEffect hooks allow you to call side effects in your component.

We Built Streamlining Accreditation Process For Physicians

What are the side effects?

A programming logic responsible for updating the state of components is known as Side Effects. On every state change component, re-renders. Let’s take a simple example of a side effect that calls an API that changes that component’s local state for storing the API response.

So, in simple words, a functional component uses state or/and props to compute the output value, but when the functional component is not targeting to compute the output value. Such calculations are known as Side-Effects.

Example:

what are the side effects in react?

This useEffect is called after every second as we have given a 1000 ms timer, and the second argument is not passed in useEffect. This causes multiple re-renders of the component. To avoid multiple re-render, we will pass a second argument to the useEffect.

Let’s see three different uses of useEffect to call the side Effects,

  1. No dependency array passed:
    The absence of the second argument causes a side effect to run multiple times, that means after every render. This case scenario is not highly used.
    No dependency array passed
  2. Empty dependency array:
    To run the useEffect only after initial rendering, this empty array is used as a second argument to the useEffect. Here the side effect count will be set only once after initial rendering.
    This case is used to make an API call or update states on the initial render.
    Empty dependency array
  3. Props or State in a dependency array:
    To call a useEffect only after the state update, we must pass that state in a dependency array.Props or State in a dependency array

 

Here the “count” state is passed inside a dependency array. When the user clicks on the “+” button count is updated; hence the “setMultiplication” side effect is called after every state update.

We can pass multiple states or props in the dependency array.

Side Effect CleanUp

Some side effects require cleanup to reduce and avoid memory leaks. Side effects such as timeout, listeners, and subscriptions no longer needed should be disposed of. We can achieve this by returning the side effect at the end of the useEffect. Side effect cleanup logic appears inside the return function.

Side Effect CleanUp

Note

  • After every initial render cleanup function is invoked to clean up the previous side effect.
  • Cleanup function is invoked on component unmount
coma

Conclusion

In this article, we saw the usage of the most highly used hook in react that is useeffect hook along with side effects and their implementation in various ways. I hope you like this article and found it informative in simple words.

Sayali

Tech Expert
Sayali is a React Native Developer with around 2.5 years of experience in developing mobile applications. She is familiar with writing blogs for the last 3 years. She is self-motivated, a fast learner, and result-oriented. She loves to write blogs on technical issues faced by developers in day-to-day work and help them through her blogs.

Get in touch for a detailed discussion.

Hear From Our 100+ Customers
coma

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.

author
ADDIE WOOTTEN
CEO, SMILINGMIND
coma

We had very close go live timeline and MindBowser team got us live a month before.

author
Shaz Khan
CEO, BuyNow WorldWide
coma

They were a very responsive team! Extremely easy to communicate and work with!

author
Kristen M.
Founder & CEO, TotTech
coma

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author
Chacko Thomas
Co-Founder, TEAM8s
coma

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author
Dave Dubier
Founder & CEO, MangoMirror
coma

Mindbowser was very helpful with explaining the development process and started quickly on the project.

author
Hieu Le
Executive Director of Product Development, Innovation Lab
coma

The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.

author
Alex Gobel
Co-Founder, Vesica
coma

Mindbowser is professional, efficient and thorough. 

author
MacKenzie R
Consultant at XPRIZE
coma

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

author
Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness
coma

MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.

author
Bennet Gillogly
Co-Founder, Flat Earth
coma

They're very tech-savvy, yet humble.

author
Uma Nidmarty
CEO, GS Advisorate, Inc.
coma

Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.

author
Katie Taylor
Founder, Child Life On Call
coma

As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity.

author
Radhika Kotwal
Founder of Courtyardly
coma

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

author
Michael Wright
Chief Executive Officer, SDOH2Health LLC
coma

They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.

author
David Cain
CEO, thirty2give
coma

We are a small non-profit on a budget and they were able to deliver their work at our prescribed budgets. Their team always met their objectives and I'm very happy with the end result. Thank you, Mindbowser team!!

author
Bart Mendel
Founder, Mindworks
coma

Mindbowser was easy to work with and hit the ground running, immediately feeling like part of our team.

author
George Hodulik
CEO, Stealth Startup, Ex-Google