javascript - Continuously displaying sensor values in a Text View with react native

Question

In the code below I am trying to get the accelerometer values and timestamp and display them in a Text view. If I comment out the line setVal(timestamp) then the values displayed with console.log({x, y, z, timestamp}) are correct (as expected). However, if I uncomment setVal(timestamp), then the values displayed with console.log eventually become all the same over time.

Not sure what I am doing wrong. I guess that setVal(timestamp) is somehow overriding the values of the variable timestamp. Is there a more correct and better way of doing this?

import React, { useState } from "react";
import {View, Text} from 'react-native';
import {accelerometer} from 'react-native-sensors';

export default function App(props) {

  const [val, setVal] = useState(1);

  const subscription = accelerometer.subscribe(({x, y, z, timestamp}) => {
    console.log({x, y, z, timestamp});
    setVal(timestamp);
  });

  return (
    <View>
      <Text>Timestamp: {val}</Text>
    </View>
  );
}

Answer 1

If you don't call setVal(timestamp), then it does not rerenders. But when you put this line, its gets rerender continuously. Try replacing your code like this. So the subscription is done once not again and again.

useEffect(()=> {
   const subscription = accelerometer.subscribe(({x, y, z, timestamp}) => {
   console.log({x, y, z, timestamp});
   setVal(timestamp);
 })},[])