Explaining useEffect Hook in React

useEffect hook is one of the most used hooks in React and it specializes in performing side effects in Functional Components.

After the introduction of hooks in React V-16.8, many things that were done by class components which led to many complex situations were solved very easily and tidily.

In this blog, we will mainly discuss the useEffect hook which very easily has replaced all the three lifecycle methods when it comes to performing side-effects.

Index

1. What is useEffect Hook
2. Types of side-effects
3. Syntax
4. Different cases of useEffect Hook
5. Conclusion

What is useEffect Hook?

As told, it is used to perform side effects in Functional Components. Side Effects are nothing but actions performed by the functional components that do not affect the output of the Component like fetching data, manipulating DOM, etc.

Let’s see a basic example to understand it better –

We will be making a counter as we did in the case of useState hook,

import React, { useState } from "react";
const Practise = () => {
const [count, setCount] = useState(0);
return (
<>
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
</>
);
};
export default Practise;

This is a basic code for updating a counter whenever the button is clicked. This is the perfect example to understand the useState hook, and now it will become the perfect example to understand the useEffect hook.

There are two kinds of side-effects that the useEffect hook performs –

1. Effects without Cleanup
2. Effects With Cleanup

Click here for the full article.