How to access state value on page refresh in react? - reactjs

Question

I am implementing time tracker in my project. When I start my tracker then I stored this tracker value into state and when pausing this tracker then change that value into the state. But when I refresh the page I am not getting last updated state value. So how can I get state value on page refresh?
const React = require("react");
const ms = require("pretty-ms");
class TaskTimer extends React.Component {
constructor(props) {
super(props);
this.state = {
time: 0,
isOn: false,
start: 0
};
this.startTimer = this.startTimer.bind(this);
this.stopTimer = this.stopTimer.bind(this);
this.resetTimer = this.resetTimer.bind(this);
}
startTimer() {
this.setState({
isOn: true,
time: this.state.time,
start: Date.now() - this.state.time
});
this.timer = setInterval(
() =>
this.setState({
time: Date.now() - this.state.start
}),
1
);
}
stopTimer() {
this.setState({ isOn: false });
clearInterval(this.timer);
}
resetTimer() {
this.setState({ time: 0, isOn: false });
}
render() {
let start =
this.state.time == 0 ? (
<button onClick={this.startTimer}>start</button>
) : null;
let stop =
this.state.time == 0 || !this.state.isOn ? null : (
<button onClick={this.stopTimer}>stop</button>
);
let resume =
this.state.time == 0 || this.state.isOn ? null : (
<button onClick={this.startTimer}>resume</button>
);
let reset =
this.state.time == 0 || this.state.isOn ? null : (
<button onClick={this.resetTimer}>reset</button>
);
return (
<div>
<h3>timer: {ms(this.state.time)}</h3>
{start}
{resume}
{stop}
{reset}
</div>
);
}
}
module.exports = TaskTimer;
Anyone please suggest me for how to get state value on page refresh?

Answer 1

if you want your state to persist after refresh, then you would need to store the state in localStorage in componentWillUnmount and then reset the state to what it used to be in componentDidMount. That is
componentDidMount() {
const stateObject = JSON.parse(localStorage.getItem("state"));
this.setState(stateObject);
}
componentWillUnmount() {
localStorage.setItem("state", JSON.stringify(this.state));
}
This can have unexpected results however in case the componentWillUnmount isn't able to be called during refresh. So a more robust (but less performant) method would be to update the state to localStorage each time you update your state. This can be done by putting the code in componentDidUpdate.
componentDidUpdate(prevProps, prevState) {
if(prevState != this.state) {
localStorage.setItem("state", this.state);
}
}
UPDATE:
After some research I found the event beforeunload which could work in a fairly performant way.
onUnload = (event) => {
localStorage.setItem("state", JSON.stringify(this.state)
}
componentDidMount() {
window.addEventListener("beforeunload", this.onUnload)
}
componentWillUnmount() {
window.removeEventListener("beforeunload", this.onUnload)
}
However, keep in mind that onbeforeunload is not properly implemented in some browsers (Safari in iOS for example). So you might face some issues with respect to that. This is the compatibility list for the event https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Browser_compatibility.