How to keep value displayed after reloading of the page? - reactjs

Question

I have a React.js application and it connects and subscribes to an MQTT broker. Initially, it gets the value from the broker properly but if I reload the page, it first shows me 0 and then it has to wait for this value to be received again from the broker so it will not get its actual value until the subscribe is notified for a change.
What I want is that after reloading of the page, I can still see the value before that. How can I do that?
Thanks in advance.
Here is my code:
render() {
//access range from redux store via props
const {rangeEstimate} = this.props
//if range is not null - show it, otherwise - show no data
const rangeValue = rangeEstimate && rangeEstimate>=0 ?
(<div>
{rangeEstimate.toString()}
</div>)
: (<div>0</div>)
if(rangeEstimate>=0 && rangeEstimate) {
localStorage.setItem('rangeValue', rangeEstimate);
}
const {battery} = this.props
//if battery is not null - show it, otherwise - show no data
const batteryValue = battery && battery>=0 ?
(<div>
{battery +"%"}
</div>)
: (<div>0%</div>)
return (
<StyledRangeContainer className="RANGE">
<div>
<StyledRangeText>{rangeValue}</StyledRangeText>
</div>
<StyledBatteryCapacityValue>{batteryValue}</StyledBatteryCapacityValue>
</StyledRangeContainer>
);
}
}
//map this component's state to props from redux store
const mapStateToProps = (state) => {
return {
rangeEstimate:state.rangeEstimate,
battery:state.battery
}
}
//connect this component to Redux
export default connect(mapStateToProps,null) (RangeEstimate)

Answer 1

Assuming you have control over the MQTT publisher, publish the value with the retained bit set.
That means that when ever a client subscribes to the topic, the last published value will be delivered by the broker immediately. The next published message (with the retained bit) will then replace this stored value.

Answer 2

In most software engineering, we set initial or starting values in the constructor. So, let's add one and use it in your class. I'm assuming it's a ReactJS class, because you are using a render() method. Here's your constructor...
constructor(props) {
super(props);
this.state = {
'rangeValue':localeStorage.getItem('rangeValue'),
'batteryValue':localeStorage.getItem('batteryValue'),
};
}
Notice I am populating the state with the results of localeStorage.getItem().
Then you need to update your render() to be based on the state...
return (
<StyledRangeContainer className="RANGE">
<div>
<StyledRangeText>{this.props.rangeValue ? this.props.rangeValue : this.state.rangeValue}</StyledRangeText>
</div>
<StyledBatteryCapacityValue>{this.props.batteryValue ? this.props.batteryValue : this.state.batteryValue}</StyledBatteryCapacityValue>
</StyledRangeContainer>
);
Of course, you'll want to use the prop value if it's there, so this code reflects that, by checking the props. You may want this to check a variable, but that would work, too.