Too many re-renders React limits the number of renders to prevent an infinite loop React JS solved
Too many re-renders React limits the number of renders to prevent an infinite loop React JS solved
how to solve Error: Too many re-renders. React limits the number of renders to prevent an infinite loop in react JS is shown
Content
0.64 -> hello everyone from this video i will be showing
you how to solve the error too many re-renders
5.44 -> react limits the number of renders to prevent
an infinite loop so let me show my code over
10.24 -> here it's like really simple code i'm using three
anchor tags or eight tags and if i just click on
14.32 -> a particular tag that particular page content will
be displayed below and i'm achieving this with the
18.88 -> help of a use state and a variable and each time
i click on this particular tag that function will
23.76 -> be getting called and the variable value will be
set stated and in inside this this is where the
29.76 -> page current gets displayed so for example if
the particular string is empty app page will be
34.96 -> getting rendered which is this one app is just
as one h1 and same thing products pr so if i'm
41.28 -> doing pr product page will be getting displayed
prs h1 has products and if i do ap which is over
48.24 -> here so app page will be getting displayed and
about tca so the reason for this error to occur
53.12 -> is same but there are many causes for this error
and this can be like varying from one person to
57.36 -> another so let me just like i will be explaining
you two cases where this why this error occurs
62.64 -> so in my case what i have done is that in on click
right i have not referenced the function okay i
69.2 -> am calling the function instead so this is the
mistake that i have done here so you will like
74.56 -> you will think that when i click this a tag this
function will be getting called but the thing is
79.44 -> not even if we don't click this function whenever
this page is getting rendered itself this function
84.72 -> it gets called by automatically okay so we will
be thinking i will plus on click this function
89.12 -> is called not at all so let me first let just
clear clarify your dot okay let me just have a
94.32 -> console.log okay console.log let me put a and
just it's consoled that's all so let me just
103.36 -> cut it and it will just instead of this
for calling functions let me just paste it
107.52 -> so i'll be having like uh
111.6 -> i'll be putting b over here and i'll be putting
118.88 -> c over here okay so same thing i've just
changed it consoled okay i'm saving it so
126.72 -> this time we will be getting the output
because okay we have because we are
130.88 -> not calling the function because that function
has set state in it and that is why our page is
135.76 -> getting re-rendered many times but now as you
can see here i haven't pressed anything okay
140.64 -> i am having pressed anything so let me just
save it again so i haven't pressed anything
145.28 -> i haven't pressed any but any links over
here if i go to inspect element okay console
153.36 -> i'll be having abc okay i haven't pressed
any button but i'm getting the output as abc
160.56 -> we would be thinking only if i press the link
i will be getting the output as a bc in the
164.08 -> console log but when the page gets rendered
itself we are getting the output as abc
169.04 -> and the reason is because we are making a function
call here automatically that's why we are getting
173.92 -> this error so how to solve this it is it's really
simple you need to just put an arrow function here
180.16 -> that's it so just i will just copy this and i'll
just paste it over here and paste it over here
188.56 -> now if i just copy this code and if i just restart
it now as you can see here i'm not getting any abc
195.92 -> 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
202.72 -> the corresponding alphabet over here so this
is the difference over here this time only we
206.96 -> are like making a reference that only if you press
the button that particular code should be executed
211.36 -> it's not calling itself directly so now if i just
go back and to the point where i had a function
217.76 -> calls okay so now if i just go over here
you will just put this arrow function
223.44 -> this is work alright okay so now if i just
run it refresh i'm not getting any errors
228.4 -> so now if i just put app about which about
parts so i'm getting this all this stuff
233.6 -> so this is one way one way this why this error
occurs so if i just remove this arrow function
239.6 -> and now if i save it so this state is committed
and i've just removed this arrow function so
244 -> again i will be getting the same error okay
so the reason is because uh once you have
249.36 -> removed this error function this becomes a
function called direct function call itself
252.64 -> so whether we click this or not this function
will be waiting called when this main page
257.12 -> loads itself so this function is getting called
page read unders again this function will be
262.48 -> getting called page re-renders because inside
this function we have set state so page will
266.48 -> be rendering so this function called will
be like unconditionally called okay so many
271.6 -> infinite number of times so that's the error react
limits the number of finders to prevent infinite
275.68 -> loop it's just an infinite loop you just keep on
re-rendering re-rendering and this error occurs
280.48 -> and another way is like really simple one so i
am just commenting this line okay so if i just
285.68 -> include this line over here that's it we will be
getting the error it's really simple it's a set
290.32 -> state that's not inside a function the only
like the previous one this change function
296 -> i had set state inside this change function but
this one is like just about the return statement
300.32 -> so it will be getting automatically executed
when this main page function is getting called
305.2 -> so now if i just go here here i will be definitely
getting another so i'm getting two milligrams
310.24 -> infinite loop of rendering so i will clearly
explain you why this error occurs now so first
316.88 -> thing main page is getting called and a default
value this is a default value null which is like
322.24 -> empty string which is assigned to our str and this
function doesn't get called and this set state
327.28 -> gets called okay so what happens when system is
called it just re-renders the entire function okay
332.88 -> so re it read it address again function doesn't
get called again set state so again re-render
338.16 -> so this process occurs continuously so we are
getting the error so if you just comment this out
343.92 -> we won't be getting the error okay that's it
so two possible ways i have explained over here
347.6 -> one is use this arrow function in case like you
are calling any function you said on click and
353.68 -> avoid using set state inside this like without
having without putting a function okay so
360.96 -> should always be inside a function so don't
put like in random places it will also cost
365.92 -> this error so these are like some of the ways
you can solve this here how it works perfectly
370.72 -> so however from this video is for minus the
program channel i read many other videos in c c
374.32 -> plus plus java python as well as three animation
blender and sql interview questions as well as
378.56 -> queries so do check the resource channel
subscribe support me thanks for watching
Source: https://www.youtube.com/watch?v=S7FeAKnPRFg