DEV Community

Cover image for State Management in Pure React with Hooks: useEffect
Bipin Rajbhar
Bipin Rajbhar

Posted on • Updated on

State Management in Pure React with Hooks: useEffect

Hello, everyone 👋, I hope you are doing great 😊.

So, today you are going to learn all the fundamental concepts of useReducer() Hook in this article.

Before you start, there are some rules you need to follow to use Hooks 😟. Thankfully the React Team has provided an ESLint Plugin called eslint-plugin-react-hooks that will help enforce these rules when using Hooks 🤩.

useEffect Hook

The useEffect() Hook allows you to perform side effects in the functional component. The side effects could be data fetching, setting up a subscription, and manually changing the DOM to React components.

The useEffect() Hook takes two arguments. The first argument is a function in which you can perform your side effects, and the second argument is an array of variables (optional).

If you do not provide the second argument, then the useEffect() Hook runs after every render.

Example

If you have noticed, the example given above behave similarly as componentDidUpdate()

If you provide an empty array in the second argument, then the useEffect() Hook run only one time.

Example

If you have noticed, the example given above behave similarly as componentDidMount()

If you provide an array with a variable in the second argument, then the useEffect() Hook run only when the variable change.

Example

If you have noticed, the example given above behave similarly as componentDidUpdate()

Before we end this article, I want to mention that you can also mimic the behavior of componentDidUnmount() by simply returning a function.

Example

If you are family with React class lifecycle methods, you can think of useEffect() Hook as componentDidMount(), componentDidUpdate() and componentDidUnMount() combined.

Now, you have learned all the fundamental concepts of useReducer() Hook 🤘.

Thanks for reading! My name is Bipin Rajbhar; I love helping people to learn new skills 😊. You can follow me on Twitter if you’d like to be notified about new articles and resources.

Discussion (6)

Collapse
emidsnithin profile image
ideaNithin

Hi Bipin,

I have one doubt how to do multiple grid row editing as such i am not able to find suitable tutorial in reactjs.org is there any better coding way...

can you please suggest...

Collapse
bipinrajbhar profile image
Bipin Rajbhar Author • Edited

Can you be more specific ?

Collapse
emidsnithin profile image
ideaNithin

Hi Bibin,

I have a popup component and there i have to add multiple and and the same can be edited multiple times and then saved so the row should be in grid format...

sorry for asking as such i dint find suitable tutorial and i am just try to develop with learning reactjs...

Thread Thread
bipinrajbhar profile image
Bipin Rajbhar Author • Edited

Do you have anydesk or TeamViewer?

Thread Thread
emidsnithin profile image
ideaNithin

Sorry i am not using an teamviewer... can you suggest some tutorial to handle it..

Thread Thread
bipinrajbhar profile image
Bipin Rajbhar Author

I really don't understand what is a problem.

I am sorry brother I can't help you
😢