Reputation: 1389
I have a simple piece of code like this :
ReactDOM.render(<Change />, document.getElementById('app'));
function Change() {
const [i, setI] = React.useState(0);
let rnd = 9;
if (i !== rnd) {
setTimeout(() => {
setI(i + 1);
}, 500);
}
React.useMemo(() => {
console.log(i);
}, [i]);
return (
<div>
<h1>I change the state</h1>
</div>
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>
I don't understand why if (i !== rnd)
Initiates a loop as the condition should just check the condition one time and move on with the code.
My thought process is like this :
i
is 0 and is not equal 9 so it goes into the time out and waits for 500 ms
runs the increment and i
becomes 1
console.log
should show 1 being printed
end
Why does it become a loop and check whether i
is equal to rnd
or not as many as the i
is not equal rnd
?
Upvotes: 0
Views: 81
Reputation: 2177
React works on a system of re-renders. When you change a variable that is used in your UI, Javascript doesn't know directly that you've changed it. That's why you have to use a state variable (useState
) with a setter function and can't just declare a variable like you would in a backend setting. When something in the UI changes, React rerenders the entire component, so it effectively calls your function again.
When you use the state setter function setI
, you are telling React to
i
ANDSo, stepping through your code here:
i = 0
and rnd = 9
i !== rnd
is true
since 0 !== 9
, the timeout is seti = i + 1
, rerenderi = 1
and rnd = 9
i !== rnd
is true
since 1 !== 9
, the timeout is setSo it's not that your if is causing a loop, it's that your function is being called multiple times.
Upvotes: 1
Reputation: 216
You're setting state in the setTimeout callback which triggers a re-render, which essentially is calling your Change
function again with an incremented value of i
. In that call the timeout gets set again, and then the state gets updated again which causes another re-render, and it goes on and on until i becomes equal 9.
Upvotes: 2
Reputation: 499
It looks like you're calling setI
which will update the state and in turn re-render the component & the if
condition?
Upvotes: 2