i am a begginer to react i am learning the useEffect hook currently i am a little bit confused over the sequence at which the data in console.log is printed , please explain it in steps , thanks
initailly i see b and c printed but then i see a ,b ,c after each second why is that ?
code
const [count, setCount] = useState(0);
const tick = () => {
setCount(count + 1)
}
useEffect(() => {
console.log("b")
const intervel = setInterval(tick, 1000)
console.log("c")
return () => {
console.log("a")
clearInterval(intervel)
}
}, [count]);
The function inside which you print a is called a cleanup function.
React calls that function before applying the next effects. That is why you see afterwards a printed each time count is changed. It is a cleanup being called from the previous render before applying effect for this render. From the docs:
When exactly does React clean up an effect? React performs the cleanup
when the component unmounts. However, as we learned earlier, effects
run for every render1 and not just once. This is why React also cleans
up effects from the previous render before running the effects next
time. We’ll discuss why this helps avoid bugs and how to opt out of
this behavior in case it creates performance issues later below.
1 That part of docs didn't talk about dependencies yet, hence it mentions effects running on each render.
The function you are returning at the end of useEffect()
return () => {
console.log("a")
clearInterval(intervel)
}
is not run the first time the component renders. That is called a cleanup function. You are returning that anonymous function to the top of the execution queue on the next render.
Knowing that, we can see that your render cycle will look something like this
Render 1:
console.log("b")
wait 1 second
console.log("c")
return console.log("a") to next render
Render 2:
console.log("a")
console.log("b")
wait 1 second
console.log("c")
return console.log("a") to next render
you set that useEffect depend on [count]
it means that you ask useEffect to recall everytime count change and call returned function (
return ()=>{
console.log("a")
clearInterval(intervel)
}
) after count change so
first component render
after render useEffect call this function
console.log("b")
const intervel = setInterval(tick, 1000)
console.log("c")
but tick change count every 1s and useEffect depend on it so after 1s
useEffect will clear because count changed so interval will stop
and will call again
so it will create a new interval and start again again again
Related
My understanding was that useEffect ran whenever the dependencies in the array were rerendered (or only at the first render in if it's blank) or whenever ANYTHING rerendered if there was no Array.
I also thought the code directly in the function about return (not inside a hook though) i.e. like how you declare variables to hold values of setState, or declared functions, only ran "once" (though i'm not sure when)
However, in the example below, I saw the console.log statement run multuple times, almost in tandem with useEffect. Specifically it seemed that the console.log was running in some weird offsync pattern with useEffect, but I don't understand why it would be running, if my variables aren't being redeclared and such. Like, even if it's on every render, similar to a useEffect with no specified dependencies, wouldn't it then also be reintializing the useState variables and such??
So my questions are
When does the code in a "raw" functional component get run, i.e. the console.log("FLOATING CODE") -> I would either think it only ran on initialization OR it ran every rerender, but neither of these seem to be the case. The question is based on the discrepancy between how the functional code reruns, but the initialization code doesnt.
Also why does it run TWICE
why is the value of "log" different on the web page and in the console.log? The setLog is literally before the console.log(), shouldn't it update FIRST? Esp given that the update clearly goes through for the page text to rerender.
import React, { useState, useEffect } from 'react';
const App = () => {
const [num, setNum] = useState(1);
const [log, setLog] = useState('');
const add = () => {
setNum(num + 1);
};
useEffect(() => {
setLog('useEffect has run-> NUM was rerendered ' + num);
console.log(log)
}, [num]);
// setLog(log + " floating code has run");
console.log('\n FLOATING CODE HAS RUN ' + num);
return (
<>
<button onClick={add}>{num}</button>
<div>{log}</div>
</>
);
};
export default App;
Thanks
Also I saw What is the difference between useEffect and code in the body of a functional component? to try and answer my first question, but it didn't explain about declarations, only about the functional difference.
In response to your questions:
The code in the body of a functional component executes every time the component is rendered (your console.log('\n FLOATING CODE HAS RUN ' + num);) In contrast, code in a useEffect fires on the initial render, and then on every render during which the value of one of the elements in the dependency array has changed. In your example, it should run on the first render, and then every time setNum causes the value of num to change.
The reason for it executing twice is difficult to determine, but it may not be an issue. It is likely being caused by internal React mechanisms such as 'strict mode', and will not occur in the production build.
No, setLog should not necessarily execute before the console.log. React setState functions are not guaranteed to execute in sequential order. They should not be regarded as synchronous. You have to take this into consideration when designing your component. This is why, when setting a state that is based on a previous state, you need to pass a callback to the 'set' function with the previous state as a parameter. With that in mind, your const add = () => { setNum(num + 1); }; line is incorrect. It should instead be const add = () => { setNum(prevNum => prevNum + 1); };
This question already has answers here:
Why React useState with functional update form is needed?
(5 answers)
Closed 6 months ago.
Can Anyone tell me the difference between this :
function IntervalHookCounter() {
const [count,setCount] = useState(0)
useEffect(()=>{
const interval = setInterval(tick,1000)
},[])
const tick = ()=>{
setCount(count+1)
}
And this :
function IntervalHookCounter() {
const [count,setCount] = useState(0)
useEffect(()=>{
const interval = setInterval(tick,1000)
},[])
const tick = ()=>{
setCount(prevState=>prevState+1)
}
I don't understand why the first one is not woriking.
Because the useEffect call that's run exactly once captures the "instance" of the tick function it sees at the time the component mounts. That "instance" of the tick function will have captured the value of count, which is initially 0.
Thus, that setInterval basically always runs setCount(0 + 1).
The second implementation doesn't do that, as the functional update form of setState has React itself provide the previous value of the state atom to the update function, so there's no "stale" count to have been captured.
Ok, so this question isn't actually about useEffect but about SetStateAction.
Ie:
setState(tick + 1);
vs
setState(tick => tick + 1);
The answer has to do with concurrency. What if you call setState(tick + 1), twice in the same render? You will update it to the same value, instead of incrementing twice like you would expect. If you pass a function to setState you will get as the first argument the latest value, instead of the value that was bound to your render.
Edit:
One issue that your code has:
function IntervalHookCounter() {
const [count,setCount] = useState(0)
useEffect(()=>{
const interval = setInterval(tick,1000)
},[])
const tick = ()=>{
//...
}
Is that you're not managing your dependencies accurately.
Your useEffect has a depdency on tick, and tick has dependency on count. Except in the 2nd example it doesn't have that dependency on count.
If you install a linting tool you will see warnings that you're missing dependencies in your code. And in the first example it's actually a problem. If the first example, adding tick as a dependency will cause the code to behave in unintended ways, especially since you're not cleaning up your setInterval in the useEffect.
This happens when the new state value depends on the previous state. Since the state update operation is a batch operation, the operation without knowing the previous state may lead you to the wrong result. Therefore, if multiple state update calls are made at the same time, the old state value is obtained first and updated over it.
useEffect(() => {
if (params.usersearch === props.search || "random" === props.search) {
console.log('same');
return;
}else{
console.log(props.search);
console.log('Params is :',params.usersearch);
let api = `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&tags=${params.usersearch}&per_page=24&format=json&nojsoncallback=1`;
props.handleLoading(true); //changing state
let fetchedData = axios
.get(api)
.then((data) => data.data.photos.photo)
.catch((err) => console.log(err));
props.handleData(fetchedData); //changing state
props.handleSearch(params.usersearch); //changing state
props.handleLoading(false); //changing state
const title = document.querySelector("title");
title.textContent = `Flickr-Photos/${params.usersearch}`;
}
},[params.usersearch]);
Hi everyone. I have a question , If my useEffect is running and it in between changes state(as I have mentioned when the props.handleLoading function gets triggered ), so is it gonna stop the and re-run the useEffect method or it is gonna complete the code?
This kind of code execution cannot be implicit stopped.
Answer:
The useEffect-callback will be called again, even if the previous is not done
You could use a debounce or blocking behavior and cancel/ignore the previous action.
UseEffect supports a clean-up method. You could return a function to cancel a timer with a given throttle value (for debounce).
As stated by the react docs
Why did we return a function from our effect? This is the optional cleanup mechanism for effects. Every effect may return a function that cleans up after it. This lets us keep the logic for adding and removing subscriptions close to each other. They’re part of the same effect!
When exactly does React clean up an effect? React performs the cleanup when the component unmounts. However, as we learned earlier, effects run for every render and not just once. This is why React also cleans up effects from the previous render before running the effects next time. We’ll discuss why this helps avoid bugs and how to opt out of this behavior in case it creates performance issues later below.
Solution
Stackblitz Example
I am using react 16.10 with typescript.
I have this code:
const [state, setState] = useState<State>({
test: 1
});
//On component mount we start our interval
useEffect(() => {
const timerID = setInterval(timer, 5000); //every 5 seconds
return function cleanup() {
//When we leave component we stop the timer
clearInterval(timerID);
};
}, []);
function timer() {
if(state.test === 3){
//HE WILL NEVER ENTER THIS CODE FUNCTION
}
setState({...state, test: 3}); // Next time we should have the value 3, BUT IT HAS NEVER THIS VALUE?!?!
}
return (
<>
<span>The output is {state.test}</span> //First it is showing 1, after 5 seconds 3. Working great
</>
);
I am changing the value of test to the number 3 in the interval "timer". setState is working fine. I can see the value in my component, seeing the number switching from 1 to 3.
But in the timer function the value is never changed. It has every time the default value of 1.
What I am doing wrong?
You need to add dependency to useEffect
//On component mount we start our interval
useEffect(() => {
const timerID = setInterval(timer, 5000); //every 5 seconds
return function cleanup() {
//When we leave component we stop the timer
clearInterval(timerID);
};
}, [state.test]); // <- here add dependency
Reason
Your effect function is called only once when component is mounted and it stored timer functions reference. now when you state changes your timer function is also updated outside but not inside of useEffect.
useEffect still uses old reference when state was 1 so inside it State always going to be 1 for that referred timer function
Now when you pass state.test as dependency. when state get changed your effect will updated and it now start using new timer function which has new state.
So now, you can have updated state in your timer function. and your condition can evaluate correctly.
if any doubts please comment.
You are not doing anything wrong, your useEffect() has a completely different value in memory and without knowing this behavior about useEffect() you have nothing in there telling useEffect() to stop looking at that old value and start looking at the new value. As Hardik wrote, your useEffect() is called only once, so you still have that old value that was originally called in there and useEffect has no idea that your timer has changed since. It will be referencing that original value forever.
What you can do is completely remove the empty array as the second argument and you will notice the difference in behavior.
Using a direct reference to the variable you are using in your state as suggested by Hardik seems to be the way to go.
So again, useEffect() is not being called a second time and as a result, nothing inside it is being ran again so it all in stale reference.
One of the tips the facebook team gives to mitigate this bug:
When you have a useEffect function that references a state, props, or context values, add them to your dependency list. In other words, if you have a props called trackId, you would want to do something like this:
useEffect(() => {
trackId
}, [trackId]);
I see a couple of potential issues, first of all you need to be calling this.state and this.setState. I'd guess state is undefined but this.state won't be. You also don't need to spread your state in your setState function, this.setState({ test: 3}); is good enough, the setState function does this for you.
Secondly you need to update state for every change, it looks like you're only updating if the test value is 3, I'm surprised it's ever 3 with this implementation
I am trying to figure out when useEffect causes a re-render. I am very surprised by the result of the following example:
https://codesandbox.io/embed/romantic-sun-j5i4m
function useCounter(arr = [1, 2, 3]) {
const [counter, setCount] = useState(0);
useEffect(() => {
for (const i of arr) {
setCount(i);
console.log(counter);
}
}, [arr]);
}
function App() {
useCounter();
console.log("render");
return <div className="App" />;
}
The result of this example is as follows:
I don't know why:
The component renders only three times (I would have guessed the component would rerender for every call to setCount + one initial render - so 4 times)
The counter only ever has two values 0 and 3: I guess, as this article states, every render sees its own state and props so the entire loop will be run with each state as a constant (1, 2, 3) --> But why is the state never 2?
I'm going to do my best to explain(or walk through) what is happening. I'm also making two assumptions, in point 7 and point 10.
App component mounts.
useEffect is called after the mounting.
useEffect will 'save' the initial state and thus counter will be 0 whenever refered to inside it.
The loop runs 3 times. Each iteration setCount is called to update the count and the console log logs the counter which according to the 'stored' version is 0. So the number 0 is logged 3 times in the console. Because the state has changed (0 -> 1, 1 -> 2, 2 -> 3) React sets like a flag or something to tell itself to remember to re-render.
React has not re-rendered anything during the execution of useEffect and instead waits till the useEffect is done to re-render.
Once the useEffect is done, React remembers that the state of counter has changed during its execution, thus it will re-render the App.
The app re-renders and the useCounter is called again. Note here that no parameters are passed to the useCounter custom hook.
Asumption: I did not know this myself either, but I think the default parameter seems to be created again, or atleast in a way that makes React think that it is new. And thus because the arr is seen as new, the useEffect hook will run again. This is the only reason I can explain the useEffect running a second time.
During the second run of useEffect, the counter will have the value of 3. The console log will thus log the number 3 three times as expected.
After the useEffect has run a second time React has found that the counter changed during execution (3 -> 1, 1 -> 2, 2 -> 3) and thus the App will re-render causing the third 'render' log.
Asumption: because the internal state of the useCounter hook did not change between this render and the previous from the point of view of the App, it does not execute code inside it and thus the useEffect is not called a third time. So the first render of the app it will always run the hook code. The second one the App saw that the internal state of the hook changed its counter from 0 to 3 and thus decides to re-run it, and the third time the App sees the internal state was 3 and is still 3 so it decides not to re-run it. That's the best reason I can come up with for the hook to not run again. You can put a log inside the hook itself to see that it does not infact run a third time.
This is what I see happening, I hope this made it a little bit clearer.
I found an explanation for the third render in the react docs. I think this clarifies why react does the third render without applying the effect:
If you update a State Hook to the same value as the current state,
React will bail out without rendering the children or firing effects.
(React uses the Object.is comparison algorithm.)
Note that React may still need to render that specific component again
before bailing out. That shouldn’t be a concern because React won’t
unnecessarily go “deeper” into the tree. If you’re doing expensive
calculations while rendering, you can optimize them with useMemo.
It seems that useState and useReducer share this bail out logic.
setState and similar hooks do not immediately rerender your component. They may batch or defer the update until later. So you get only one rerender after the latest setCount with counter === 3.
You get initial render with counter === 0 and two additional rerenders with counter === 3. I am not sure why it doesn't go to an infinite loop. arr = [1, 2, 3] should create a new array on every call and trigger useEffect:
initial render sets counter to 0
useEffect logs 0 three times, sets counter to 3 and triggers a rerender
first rerender with counter === 3
useEffect logs 3 three times, sets counter to 3 and ???
React should either stop here or go to an infinite loop from step 3.
There is a coincidence that might create some confusion in the original issue. Mainly the fact that there are 3 renders and the useCounter has a default param of length equal to 3. Bellow you can see that even for a larger array there will be only 3 renders.
function useCounter(arr = [1, 2, 3, 4 , 5 , 6]) {
const [counter, setCount] = React.useState(0);
React.useEffect(() => {
for (const i of arr) {
setCount(i);
console.log(counter);
}
}, [arr]);
}
function App() {
useCounter();
console.log("render");
return <div className = "App" / > ;
}
ReactDOM.render( <App /> ,
document.getElementById("root")
);
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Another confusion might be created by the fact that the setState is called every time, except the first one, with the same value (the last value of the array), which practically cancel the render. If however the setState would be called with different values, the presented flow would create an infinite loop :)
because every other render triggers a useEffect which triggers a setSate which triggers a render which triggers a useEffect and so on.
Hopefully this makes things more clear for someone.
The above solutions very much explained what's happening in the code. If someone is looking for how to avoid re-renders while using default argument in the custom hooks. This is a possible solution.
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const defaultVal = [1, 2, 3];
function useCounter(arr = defaultVal) {
const [counter, setCount] = useState(0);
useEffect(() => {
console.log(counter);
setCount(arr);
}, [counter, arr]);
return counter;
}
function App() {
const counter = useCounter();
console.log("render");
return (
<div className="App">
<div>{counter}</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Explanation: Since there is no value provided to the custom hook, it is taking the default value which is a constant defaultVal. Which means arr reference is always the same. Since the reference didn't change it's not triggering the useEffect hook
This question and all the answers I read were so insightful to even better understand useEffect and useState hooks because they forced me to dig in to have a depth grasp of those.
Though #ApplePearPerson answer is quite articolate I do believe there are some incorrect aspect and I will point them out with few example:
Component is rendered and so the first "render" in console.
UseEffect run always at least one, after the first render, this basically
explain the second render and is the tricky part on why are printed first
0 x ( initial value for counter)
The second argument of the useState hook is an async function thus has async bahavior: it wait other code to run, so it wait the for in block to run.
So the for in block runs and so:
i goes from 1 to 3 with finish value of 3
At this point setCount change counter from 0 t0 3
Useffect runs on dependencies change if there is the array as second argument, so in this case even it is not included, it runs on counter that is been changed from setCount, as you can see even from Eslint warning(React Hook useEffect has a missing dependency: 'counter')
The useState change state cause for the hook one a render(this is why useRef is been introduced for change dom element without cause rerender), though isn't always the case for the setState in class(but this is another topic)
Last render is caused as on each render the arr is re-created, as
ApplePearPerson "noticed" but is a complete new array as component
is been re-rendered but counter is 3 and is not different from
last value that i has, that is exactly 3 as well and so useEffect
doesn't run again.
This screenshot can help to visualize my summary
So e.g if we change the for of with a for in, meaning we take the key of the array(that are string) we see that the last value of counter is 2 in this case
https://codesandbox.io/s/kind-surf-oq02y?file=/src/App.js
Another test can be done adding a second counter that is set to the previous.
In this case we obtain a fourth Render, as the count2 is behind 1 useffect and it's change from 0 to 3 trigger the last render but not the last useEffect run.
To summurize:
There are 3 Render:
First is due to Component first mount.
Second is due to useEffect run after first Render.
Third is due to change in the dependency from 0 to 3
https://codesandbox.io/s/kind-surf-oq02y?file=/src/App.js:362-383