I am trying to make a crypto price tracker website. I am fetching the data after every 10 seconds its updating the coinList variable prevData variable. I want to access the prevData variable inside the useEffect also but inside it the variable is not updating, its value remains []. But if I use prevData outside useEffect the data is changing and I can use it.
I just want the value of prevData inside useEffect which is updating.
function App() {
const [coinsList, setCoinsList] = useState([]);
const [prevData, setPrevData] = useState([]);
let [width, setWidth] = useState(window.innerWidth)
useEffect(() => {
async function fetchData() {
const response = await fetch('api key').then(res => res.json())
setCoinsList(res);
setPrevData(res);
}
fetchData()
async function fetchData2() {
const res = await fetch('api key').then(res => res.json())
for (let i = 0; i < prevData.length; i++) {
if (res[i].current_price > prevData[i].current_price) {
let coin = document.getElementById(`${prevData[i].id}`)
coin.classList.add('green')
console.log(coin)
// setTimeout(() => {
// coin.classList.remove('green')
// }, 1000)
} else if (res[i].current_price < prevData[i].current_price) {
let coin = document.getElementById(`${prevData[i].id}`)
coin.classList.add('red')
console.log(coin)
// setTimeout(() => {
// coin.classList.remove('red')
// }, 1000)
} else {
let coin = document.getElementById(`${prevData[i].id}`)
console.log(coin)
coin.classList.add('blue')
// setTimeout(() => {
// coin.classList.remove('blue')
// }, 1000)
}
}
setPrevData(res);
setCoinsList(res);
}
setInterval(() => {
fetchData2()
console.log(prevData) // it is not updating
}, 10000)
}, [])
useEffect(() => {
window.addEventListener('resize', () => {
setWidth(window.innerWidth)
})
}, [window.innerWidth])
console.log(prevData) // it is updating
You have closure on prevData value in setInterval scope, you can use a ref to fix it:
const prevDataRef = useRef();
// Keep the ref updates
useEffect(() => {
prevDataRef.current = prevData;
}, []);
// no closure
useEffect(() => {
setInterval(() => {
fetchData2(); // use prevDataRef.current
console.log(prevDataRef.current); // updated
}, 10000);
}, []);
In fetchData2 you've a stale enclosure of the prevData state. It is closed over in the interval callback scope.
One way to remedy is to use a React ref and an additional useEffect hook to cache a copy of the prevData state that can be accessed in the fetchData2 callback.
function App() {
const [coinsList, setCoinsList] = useState([]);
const [prevData, setPrevData] = useState([]);
const prevDataRef = React.useRef(prevData);
useEffect(() => {
prevDataRef.current = prevData;
}, [prevData]);
...
useEffect(() => {
...
async function fetchData2() {
const prevData = prevDataRef.current; // <-- grab current value
const res = await fetch('api key').then(res => res.json());
for (let i = 0; i < prevData.length; i++) {
if (res[i].current_price > prevData[i].current_price) {
let coin = document.getElementById(`${prevData[i].id}`);
coin.classList.add('green');
} else if (res[i].current_price < prevData[i].current_price) {
let coin = document.getElementById(`${prevData[i].id}`);
coin.classList.add('red');
} else {
let coin = document.getElementById(`${prevData[i].id}`);
coin.classList.add('blue');
}
}
setPrevData(res);
setCoinsList(res);
}
setInterval(() => {
fetchData2();
}, 10000)
}, []);