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

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
United Top Tech
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