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:

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.

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:

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.
   
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.
   
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.

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.

Note

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