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.

Keep Reading

Keep Reading

Struggling with EHR integration? Learn about next-gen solutions in our upcoming webinar on Mar 6, at 11 AM EST.

Register Now

Let's create something together!