Too many re-renders React limits the number of renders to prevent an infinite loop React Error

Dear friends in this video i am going to explain how i fixed an error which happened when i was working in a react web project. 

I have opened my project files in vs code. First i will explain my project. Let us go to app.js Here i have imported a component named welcome. I have used that component here. It has a prop "message". I have passed the string "welcome to technursery" .Now let us go to welcome component. It is in src folder. Inside src folder components folder, inside components folder, we have welcome.js component Here we accept message as prop.  

Then we initialize "msg" state with that message.So when we run the project first it will show "welcome to technursey" using this h1 tag. Later i have a button tag also in welcome component. When i  click on button "setMsg" will execute and this h1 tag will be placed with "thank you for subscribing" message. Button name is subscribe. So i will run that project then let us check what will happen 

"npm start" enter my project is running. Yes browser is opened. But i cannot see any message on the browser. As per our source code, it should show "welcome to technursery" first and when we click subscribe button it should show "thank you for subscribing" So let us go to inspect. go to console. Yes we got error 

"uncaught error too many re-renders react limits the number of renders to prevent an infinite loop at a render with hooks the above error occurred in welcome component at Welcome at Div at App. Consider adding an error boundary to your tree to customize error handling behavior. Uncaught error too many re-renders react limits the number of renders to prevent an infinity loop".

So because of this too many re-renders error we cannot see the "welcome to technursery" message on the browser. So let us examine our welcome.js component to fix this error.

I will explain two options, two methods to fix this error. This is happening because of this onclick event.

Here we directly called "setMsg" and asign "thank you for subscribing" to the state "msg" .How to rewrite this onclick event as this It should be an arrow function. Now we rewrite onclick event like this. So let me save this file ,compiling. Yes let us go to browser .We got the output as we expected "welcome to technursery" and subscribe button now let us click on subscribe, we got the message "thank you for subscribing" yes our project successfully run as our  expectation. So the problem was with this onclick event, before we directly called "setMsg" with new value "thank you for subscribing" now we rewrite it, as a arrow function. Let me close this project. Let me clear the terminal. Now i will rewrite this arrow function separately. 

Let me type const "clickHandler" is equal to. Let me copy this "setMsg" hook then let us copy this "clickHandler" and we can replace this entire code just  place this "clickHandler" here. Now we defined an arrow function named "clickHandler" everything is same we use the same line of code and we just replace it with the "clickHandler" here let's save this one and let us run the project again "npm start" enter now our project is running

yes now we don't get any error. Let us click on subscribe button "thank you for subscribing" so as a summary, our problem was onclick event we use useState "setMsg" directly so once the component is loaded it will infinitely calling this onclick event that is what we got the error. So handling this error with arrow function is the solution. I explained two types of fixing this error. So you can use any of this. It may help you

Thank you