How to use an updated value of a variable (declared at component scope) in each 'useEffect'?
import React, { useState, useEffect } from 'react';
export default function Count() {
const [count, setCount] = useState(0);
let a = 10;
useEffect(() => {
console.log('after 1st render', a);
a++;
console.log(a);
return () => { console.log('cleanup - on unmount.') }
}, [a]);
useEffect(() => {
console.log('only when count changes', a);
a++;
return () => { console.log('count cleanup', a) }
}, [count, a]);
return <div>
<p>Count : {count}</p>
<button onClick={() => { console.log('at global', a); setCount(count + 1) }}>Click</button>
</div>
}
output
after 1st render 10
11
only when count changes 11
at global 12
count cleanup 12
only when count changes 10
Now, What I don't understand from this output is the last line which outputs the value of 'a' as 10.
Every time a useEffect gets called, it creates a new copy of the function provided, and it also calls the cleanUp function right?.
when I click the button the count changes, the previous cleanUp gets called and clean that 'useEffect' behaviour which sets the value of 'a' from 11 to 12, and then the current 'useEffect' called with value 10. it should print the value 11. ? can anyone please clarify this.
useEffect is only called after the component is rendered with the previous value. Only after the render is done is the ref object updated within useEffect.
To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '. current' property. Otherwise, you can move this variable directly inside useEffect react-hooks/exhaustive-deps" This warning is displayed in the console and I don't know why. Also the handleLogin is not setting value.
You can add the state variables you want to track to the hook's dependencies array and the logic in your useEffect hook will run every time the state variables change. Copied! import {useEffect, useState} from 'react'; const App = () => { const [count, setCount] = useState(0); useEffect(() => { console.
On every render, all Count
body executed, therefore changing state via button click will result in calling let a = 10
and resetting the value of a
.
In other words, the local variable a
lifetime is until the next render.
To get desired behavior, try using a reference with useRef
.
useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
const [count, setCount] = useState(0);
const aRef = useRef(10);
let a = 10;
useEffect(() => {
console.log("after 1st render", a);
a++;
aRef.current++;
console.log(a);
return () => {
console.log("cleanup - on unmount.");
};
}, [a]);
useEffect(() => {
console.log("only when count changes", a);
console.log("only when count changes - ref", aRef.current);
a++;
aRef.current++;
return () => {
console.log("count cleanup", a);
};
}, [count, a]);
Will result:
only when count changes 10
only when count changes - ref 12
Read more at uses of useEffect
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With