0

why code leads to infinite loop even when value within setState() is not changing.. we know state do not change if the current value and previous values are same. yet state is changing which is leading the component to re-render.

** we know component re-render when state changes

but previous and current values are same

then why component re rendering

also object is not passed as argument where react checks on basis of reference. as this is a primitive react checks on basis of value. still why the component re rendering???

import React, { useState } from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
    const [state,setState] = useState(0)
    console.log(state)
    setState((prev)=>7)
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.jsx</code> and save to reload!
                </p>
                <span className="App-link">Hello from codedamn :)</span>
            </header>
        </div>
    )
}

export default App

setState outside a useEffect totally not equals to useEffect without dependency array. you can try. setState(9) inside a useEffect with no dependency array provided. and setState(9) without useEffect as in the code.

ray_milan
  • 27
  • 7

1 Answers1

1

In React, changing the state triggers a re-render of the component. Even if the new state value is the same as the previous value, the re-render still occurs because React cannot optimize for every possible state change. Therefore, when you call setState with the same value, it still triggers a re-render.

In your example code, setState is called with a constant value of 7, which means it will always be the same. So even though the value is not changing, the re-render is still triggered, leading to an infinite loop.

Regarding your question about using setState outside of a useEffect versus inside it, the difference is that setState outside a useEffect will trigger a re-render immediately, while setState inside a useEffect with no dependency array will trigger a re-render only once, on component mount. On the other hand, setState with no dependencies outside or inside a useEffect is essentially the same, as it will trigger a re-render on every component update.

user8410912
  • 29
  • 3
  • 2
    I was about to write something similar but you formulated it better. Just curious why someone had down vote it without any comment? – starking Mar 26 '23 at 07:00
  • 2
    I was stuck in the same situation earlier. So, i know about it. Thanks. – user8410912 Mar 26 '23 at 07:02
  • no sir i disagree your response. may be i need a detailed explanation how useState works internally – ray_milan Mar 26 '23 at 07:16
  • please check, when we do: useEffect(()=>{setState(7)}) vs setState(7), both have different output. you can check. 1st case with useEffect do not lead to infinite loop while the 2nd one does. so how can we say both the cases are same. either you explaining wrong or react works differently than we expected which i need to know – ray_milan Mar 26 '23 at 07:19
  • 1
    If you want to know more about `useState` you can go through this official react `useState` explanation is well written and very useful. But too long too read. – user8410912 Mar 26 '23 at 07:19
  • yes this one is what needed here. `useEffect(()=>{setState(7)})` – user8410912 Mar 26 '23 at 07:20
  • 1
    official `useState` explanation - https://react.dev/reference/react/useState – user8410912 Mar 26 '23 at 07:22
  • as you said, react will rerender upon each setState, whether the value changes or not. if thats the case , that means useEffect will be fired that amount amount of time. as we know per each render one side effect. but in the first case, you can try and see, react not going to infinite loop. if you are saying each setState means a rerender, then when there is no array dependency in useEffect why that stopping after 2 re render. we can clearly see, that when you console log something inside that useEffect, that is logged only twice... – ray_milan Mar 26 '23 at 07:22
  • i went through every available doc. nowhere i found my answer .thats why i came to stackoverflow – ray_milan Mar 26 '23 at 07:24