Handling state react native - reactjs

Question

This is my picker with a linechart(LChart) component.
<Picker selectedValue = {this.state.value}
onValueChange = {this.onValueChange}
>
<Picker.Item value='' label='Select Device...' />
{devices.map((s, i) => {
return (<Picker.Item label={s} value={s} key={i}/>)
})}
</Picker>
<LChart data={Fdata} title={"LineChart"}/>
I have an array of devices to feed into picker and with every onValuechange i want to show the linechart of respective device.
My onValueChange function:
onValueChange = async(value) => {
this.setState({ value: value })
this.interval = setInterval(() => {
var Fdata = [];
fetch('http://ec2-137.compute-1.amazonaws.com:3009/chart/unitID', {
method: 'post',
headers:{
'Accept': 'application/json',
'Content-type': 'application/json'
},
body:JSON.stringify({
unitID: value,
}) })
.then((response) => response.json())
.then((responseJson) => {
responseJson.forEach(function (vol) {
Fdata.push({
value: vol.voltage,
date: new Date(vol.time),
});
});
if (this._isMounted) {
this.setState({
Fdata: Fdata,
});
}
})
}, 5000);
}
my issue here is when i initially select a device from picker, the line chart shows up perfect and reloads according to my set interval.
But when i select a different device from the picker, the line chart started to toggle between first and second device data and same continues with 3 rd selection and so on.
I guess i am not handling the state properly.
Any help will be appreciated. Thanks a ton.

Answer 1

You need to clean up the interval. Right now, you just keep creating additional intervals that will ping the device. One thing you could do is create a useEffect that will clear the interval after the selected device changes. The example below uses a placeholder, but you should be able to see the general idea.
const {useState, useEffect, Fragment} = React;
const Chart = ({deviceData}) => {
return (
<div>
{deviceData ? (
<Fragment>
<div>Date fetched: {Date.now()}</div>
<pre><code>{JSON.stringify(deviceData, null, 4)}</code></pre>
</Fragment>
) : (
<p>Waiting for device</p>
)}
</div>
);
};
const App = () => {
const [selectedDevice, setSelectedDevice] = useState("");
const [deviceAttrs, setDeviceAttrs] = useState();
useEffect(() => {
if (!selectedDevice) return;
const interval = setInterval(() => {
fetch(`http://jsonplaceholder.typicode.com/todos/${selectedDevice}`)
.then(res => res.json())
.then(data => setDeviceAttrs(data));
}, 5000);
return () => clearInterval(interval);
}, [selectedDevice]);
const options = [1, 2, 3];
return (
<div>
<select onChange={e => setSelectedDevice(e.target.value)}>
<option value="">Please select a device</option>
{options.map(option => (
<option key={option} value={option}>Device {option}</option>
))}
</select>
{selectedDevice ? (
<Chart deviceData={deviceAttrs} />
) : (
<div>Please select a device</div>
)}
</div>
);
};
ReactDOM.render(<App />, document.getElementById("app"));
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<div id="app"></div>