Explaining useEffect Hook in React


  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.

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;
  1. Effects With Cleanup



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
Ateev Duggal

Ateev Duggal

I am a front-end developer from India with over one year of experience in freelancing with skills like Git, HTML5, CSS3, Bootstrap 4&5, and React.