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 ascomponentDidMount()
,componentDidUpdate()
andcomponentDidUnMount()
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.
Top comments (6)
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...
Can you be more specific ?
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...
Do you have anydesk or TeamViewer?
Sorry i am not using an teamviewer... can you suggest some tutorial to handle it..
I really don't understand what is a problem.
I am sorry brother I can't help you
😢