referencing the latest state in useInterval that uses useRef - reactjs

Question

As Dan Abramov introduced, I wrote an interval using useRef so it does not get created on every render. My code below saves the redux store into local storage every 20 seconds. However, the store inside of setInterval does not get updated which leads to saving the same initial store every 20 seconds.
import { useRef, useState } from "react";
import { useSelector } from "react-redux";
import styles from "./AutoSaveButton.module.scss";
import LOCAL_STORAGE_KEY from "../../../constants/localStorage";
const TWO_SECONDS = 2000;
const TWENTY_SECONDS = 20000;
function AutoSaveButton() {
const store = useSelector((state) => state);
const interval = useRef(null);
const [isAutoSaveOn, setIsAutoSaveOn] = useState(false);
const [isSavedMsgDisplayed, setIsSavedMsgDisplayed] = useState(false);
const toggleAutoSave = () => {
if (isAutoSaveOn) {
setIsAutoSaveOn(false);
clearInterval(interval.current);
return;
}
setIsAutoSaveOn(true);
interval.current = setInterval(() => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(store)); <-- how to update?
setIsSavedMsgDisplayed(true);
setTimeout(() => {
setIsSavedMsgDisplayed(false);
}, TWO_SECONDS);
}, TWENTY_SECONDS);
};
return (
<span
className={isAutoSaveOn ? styles.active : styles.stale}
onClick={toggleAutoSave}
>
{isAutoSaveOn ? "auto save off" : "auto save on"}
{isAutoSaveOn && (
<span
className={`material-symbols-outlined ${
isSavedMsgDisplayed ? styles["icon-visible"] : styles["icon-greyed"]
}`}
>
done
</span>
)}
</span>
);
}
export default AutoSaveButton;

Answer 1

since closure will always capture the variable store each time it's reinitialized. use [YOUR STORE].getState().[your reducer] instead
const { useRef, useState } = React
const { useSelector,Provider,useDispatch } = ReactRedux
const { configureStore,createSlice } = window.RTK
//import styles from "./AutoSaveButton.module.scss";
const LOCAL_STORAGE_KEY = "XXX"
const slice = createSlice({
name: 'data',
initialState: {
value: 0,
},
reducers: {
setData: (state, action) => {
state.value += action.payload
},
},
})
const mystore=configureStore({
reducer: {
data: slice.reducer
},
})
const TWO_SECONDS = 2000;
const TWENTY_SECONDS = 20000;
function AutoSaveButton() {
const store = useSelector((state) => state.data);
const interval = useRef(null);
const [isAutoSaveOn, setIsAutoSaveOn] = useState(false);
const [isSavedMsgDisplayed, setIsSavedMsgDisplayed] = useState(false);
const toggleAutoSave = (store) => {
if (isAutoSaveOn) {
setIsAutoSaveOn(false);
clearInterval(interval.current);
return;
}
setIsAutoSaveOn(true);
console.log("store outside", store);
interval.current = setInterval(() => {
setIsSavedMsgDisplayed(true);
console.log("store inside", mystore.getState().data);
setTimeout(() => {
setIsSavedMsgDisplayed(false);
}, TWO_SECONDS);
//localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(mystore.getState().data)); //<-- how to update?
}, 1000);
};
return (
<span
className=""
onClick={()=>toggleAutoSave(store)}
>
{isAutoSaveOn ? "auto save off" : "auto save on"}
{isAutoSaveOn && (
<span
className={`material-symbols-outlined `}
>
done
</span>
)}
</span>
);
}
const App=()=>{
return <Provider store={mystore}>
<AutoSaveButton />
<B/>
</Provider>
}
const B=()=>{
const dispatch=useDispatch()
return <button onClick={()=>dispatch(slice.actions.setData(12))}>
setData
</button>
}
ReactDOM.render(<App/>,document.getElementById("App"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/8.0.2/react-redux.min.js"></script>
<script src="https://unpkg.com/#reduxjs/toolkit#1.8.3/dist/redux-toolkit.umd.js"></script>
<div id="App">
</div>
second way watchc store with useEffect and put it to ref
const { useRef, useState, useEffect} = React
const { useSelector,Provider,useDispatch } = ReactRedux
const { configureStore,createSlice } = window.RTK
//import styles from "./AutoSaveButton.module.scss";
const LOCAL_STORAGE_KEY = "XXX"
const slice = createSlice({
name: 'data',
initialState: {
value: 0,
},
reducers: {
setData: (state, action) => {
state.value += action.payload
},
},
})
const mystore=configureStore({
reducer: {
data: slice.reducer
},
})
const TWO_SECONDS = 2000;
const TWENTY_SECONDS = 20000;
function AutoSaveButton() {
const store = useSelector((state) => state.data);
const interval = useRef(null);
const mystore = useRef(store);
useEffect(()=>{
mystore.current=store
},[store])
const [isAutoSaveOn, setIsAutoSaveOn] = useState(false);
const [isSavedMsgDisplayed, setIsSavedMsgDisplayed] = useState(false);
const toggleAutoSave = () => {
if (isAutoSaveOn) {
setIsAutoSaveOn(false);
clearInterval(interval.current);
return;
}
setIsAutoSaveOn(true);
console.log("store outside", store);
interval.current = setInterval(() => {
setIsSavedMsgDisplayed(true);
console.log("store inside", mystore.current);
setTimeout(() => {
setIsSavedMsgDisplayed(false);
}, TWO_SECONDS);
//localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(mystore.current); //<-- how to update?
}, 1000);
};
return (
<span
className=""
onClick={toggleAutoSave}
>
{isAutoSaveOn ? "auto save off" : "auto save on"}
{isAutoSaveOn && (
<span
className={`material-symbols-outlined `}
>
done
</span>
)}
</span>
);
}
const App=()=>{
return <Provider store={mystore}>
<AutoSaveButton />
<B/>
</Provider>
}
const B=()=>{
const dispatch=useDispatch()
return <button onClick={()=>dispatch(slice.actions.setData(12))}>
setData
</button>
}
ReactDOM.render(<App/>,document.getElementById("App"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/8.0.2/react-redux.min.js"></script>
<script src="https://unpkg.com/#reduxjs/toolkit#1.8.3/dist/redux-toolkit.umd.js"></script>
<div id="App">
</div>

Answer 2

I think I found an answer myself, but if any of you find this dumb, please leave a comment. I am open to discussions!
import { useEffect, useRef, useState } from "react";
import { useSelector } from "react-redux";
import styles from "./AutoSaveButton.module.scss";
import LOCAL_STORAGE_KEY from "../../../constants/localStorage";
const TWO_SECONDS = 2000;
const TWENTY_SECONDS = 5000;
function AutoSaveButton() {
const store = useSelector((state) => state);
const interval = useRef(null);
const [isAutoSaveOn, setIsAutoSaveOn] = useState(false);
const [isSavedMsgDisplayed, setIsSavedMsgDisplayed] = useState(false);
const toggleAutoSave = () => {
if (isAutoSaveOn) {
setIsAutoSaveOn(false);
clearInterval(interval.current);
return;
}
setIsAutoSaveOn(true);
interval.current = setInterval(() => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(store));
setIsSavedMsgDisplayed(true);
setTimeout(() => {
setIsSavedMsgDisplayed(false);
}, TWO_SECONDS);
}, TWENTY_SECONDS);
};
/* I added below useEffect and got desired result! */
useEffect(() => {
if (!interval.current) return;
clearInterval(interval.current);
interval.current = setInterval(() => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(store));
setIsSavedMsgDisplayed(true);
setTimeout(() => {
setIsSavedMsgDisplayed(false);
}, TWO_SECONDS);
}, TWENTY_SECONDS);
}, [store]);
return (
<span
className={isAutoSaveOn ? styles.active : styles.stale}
onClick={toggleAutoSave}
>
{isAutoSaveOn ? "auto save off" : "auto save on"}
{isAutoSaveOn && (
<span
className={`material-symbols-outlined ${
isSavedMsgDisplayed ? styles["icon-visible"] : styles["icon-greyed"]
}`}
>
done
</span>
)}
</span>
);
}
export default AutoSaveButton;