In Web Development
Too many re-renders React limits the number of renders to prevent an infinite loop React JS solved - read the full article about React update, Web Development and from United Top Tech on Qualified.One
Youtube Blogger
hello everyone from this video i will be showing you how to solve the error too many re-renders react limits the number of renders to prevent an infinite loop so let me show my code over here its like really simple code im using three anchor tags or eight tags and if i just click on a particular tag that particular page content will be displayed below and im achieving this with the help of a use state and a variable and each time i click on this particular tag that function will be getting called and the variable value will be set stated and in inside this this is where the page current gets displayed so for example if the particular string is empty app page will be getting rendered which is this one app is just as one h1 and same thing products pr so if im doing pr product page will be getting displayed prs h1 has products and if i do ap which is over here so app page will be getting displayed and about tca so the reason for this error to occur is same but there are many causes for this error and this can be like varying from one person to another so let me just like i will be explaining you two cases where this why this error occurs so in my case what i have done is that in on click right i have not referenced the function okay i am calling the function instead so this is the mistake that i have done here so you will like you will think that when i click this a tag this function will be getting called but the thing is not even if we dont click this function whenever this page is getting rendered itself this function it gets called by automatically okay so we will be thinking i will plus on click this function is called not at all so let me first let just clear clarify your dot okay let me just have a console.log okay console.log let me put a and just its consoled thats all so let me just cut it and it will just instead of this for calling functions let me just paste it so ill be having like uh ill be putting b over here and ill be putting c over here okay so same thing ive just changed it consoled okay im saving it so this time we will be getting the output because okay we have because we are not calling the function because that function has set state in it and that is why our page is getting re-rendered many times but now as you can see here i havent pressed anything okay i am having pressed anything so let me just save it again so i havent pressed anything i havent pressed any but any links over here if i go to inspect element okay console ill be having abc okay i havent pressed any button but im getting the output as abc we would be thinking only if i press the link i will be getting the output as a bc in the console log but when the page gets rendered itself we are getting the output as abc and the reason is because we are making a function call here automatically thats why we are getting this error so how to solve this it is its really simple you need to just put an arrow function here thats it so just i will just copy this and ill just paste it over here and paste it over here now if i just copy this code and if i just restart it now as you can see here im not getting any abc over and now if i just press each link i will be getting a b and c so if i press i will be getting the corresponding alphabet over here so this is the difference over here this time only we are like making a reference that only if you press the button that particular code should be executed its not calling itself directly so now if i just go back and to the point where i had a function calls okay so now if i just go over here you will just put this arrow function this is work alright okay so now if i just run it refresh im not getting any errors so now if i just put app about which about parts so im getting this all this stuff so this is one way one way this why this error occurs so if i just remove this arrow function and now if i save it so this state is committed and ive just removed this arrow function so again i will be getting the same error okay so the reason is because uh once you have removed this error function this becomes a function called direct function call itself so whether we click this or not this function will be waiting called when this main page loads itself so this function is getting called page read unders again this function will be getting called page re-renders because inside this function we have set state so page will be rendering so this function called will be like unconditionally called okay so many infinite number of times so thats the error react limits the number of finders to prevent infinite loop its just an infinite loop you just keep on re-rendering re-rendering and this error occurs and another way is like really simple one so i am just commenting this line okay so if i just include this line over here thats it we will be getting the error its really simple its a set state thats not inside a function the only like the previous one this change function i had set state inside this change function but this one is like just about the return statement so it will be getting automatically executed when this main page function is getting called so now if i just go here here i will be definitely getting another so im getting two milligrams infinite loop of rendering so i will clearly explain you why this error occurs now so first thing main page is getting called and a default value this is a default value null which is like empty string which is assigned to our str and this function doesnt get called and this set state gets called okay so what happens when system is called it just re-renders the entire function okay so re it read it address again function doesnt get called again set state so again re-render so this process occurs continuously so we are getting the error so if you just comment this out we wont be getting the error okay thats it so two possible ways i have explained over here one is use this arrow function in case like you are calling any function you said on click and avoid using set state inside this like without having without putting a function okay so should always be inside a function so dont put like in random places it will also cost this error so these are like some of the ways you can solve this here how it works perfectly so however from this video is for minus the program channel i read many other videos in c c plus plus java python as well as three animation blender and sql interview questions as well as queries so do check the resource channel subscribe support me thanks for watching
United Top Tech: Too many re-renders React limits the number of renders to prevent an infinite loop React JS solved - Web Development