4

The code below should not trigger a re-render because it's passing the same initial value right? But it instead causes 'Too many re-renders' error.

function Test() {
   const [counter, setCounter] = useState(0)
   setCounter(0)
   return <></>
}

Edit: If you setCounter(0) in a function and attach it to a button click, it won't trigger a re-render since it has the same value so why does it trigger re-render when placed in the body of the component? I am aware of the useEffect with empty dependency array to avoid the infinite loop.

If you do this, you'll see that it doesn't re-render:

function Test() {
   const [counter, setCounter] = useState(0)

   console.log('render');

   const set = () => {
     setCounter(0)
   };

   return <button onClick={set}>Set</button>
}
Marvin
  • 43
  • 5

2 Answers2

3

In React, If we use SetState in render phase, it may result in infinite loop of updating the state value.

In your case, you have setState in the body of the component. So it will re-render and cause an infinite loop.

If you just want to update once, use useEffect instead.

Refer for detailed answer: Updating state to the same value directly in the component body during render causes infinite loop

useEffect(() => {
 setCounter(0)
},[])
sms
  • 1,380
  • 1
  • 3
  • 5
  • if you place setCounter(0) in a function and attach it on button click, it wont trigger a re-render since it has the same value. So why does it trigger re-render when placed in the body of the component? – Marvin Aug 21 '22 at 02:53
  • If you attach it with Button Click event of the function, it will rerender the component.. but does not cause an infinite loop because the next update is not in the body .. rather it was in the onclick event of the button... But if you put it in body like u have done it.. it will cause an infinite loop.. – sms Aug 21 '22 at 04:04
  • It does not rerender, test it out and you will see. The point I'm trying to make is doing setCounter(0) in the body causes a rerender but it does not when placed in a function, when the value did not even change? I just wanna know why – Marvin Aug 21 '22 at 04:54
  • It doesn't matter what you put there. The console log is only there to see if the rerender happened but it didn't log to the console, so the rerender did not happen – Marvin Aug 21 '22 at 05:53
  • yes.. react internally checks the value needs to updated or not.. if it doesnot need any rerender.. it will wont rerender the component.. but if you have setState in body.. that will surely cause an infinite loop.. – sms Aug 21 '22 at 05:56
  • Okay okay, I guess it is what it is. Thank you – Marvin Aug 22 '22 at 00:16
2

I hope it's not too late, but I asked the same question too and got a really good and logical explanation for this.

And as some people might think that the setState function triggers re-rendering anyway even if the state is the same - that's not true at all.

See this link to my question: Updating state to the same state directly in the component body

Tehila
  • 917
  • 4
  • 19