reactjs - Slider taking too much RAM, which leads to memory leaks

Question

I have this component to track current time of an audio file:

const SeekBar = (props) => {
  const [isSeeking, setIsSeeking] = useState(false);
  const [seek, setSeek] = useState(0);
  const [position, setPosition] = useState(0)

  useEffect(() => {
    const loop = setInterval(() => setPosition(position => position + 1), 1000)
    return () => clearInterval(loop)
  }, [])
  const { duration } = props

  return (
    <View style={myStyle.seekBar}>
      <View style={myStyle.seekBarContainer}>
        <Text
          style={styles.seekBarTime}
        >
          {position}
        </Text>
        <Slider
          minimumValue={0}
          maximumValue={duration}
          thumbTintColor='#000000'
          minimumTrackTintColor='#000000'
          maximumTrackTintColor='#808080'
          step={1}
          value={isSeeking === true ? seek : position}
          onValueChange={(value) => {
            setIsSeeking(true);
            setSeek(value);
          }}
          onSlidingComplete={async (value) => {
            setSeek(value);
            setIsSeeking(false)
            setPosition(value)
          }}
        />
        <Text>{duration}</Text>
      </View>
    </View>
  )
};

These lines of code seem to work well:

Except one thing: the RAM of device is increasing more and more while the progressing bar is updating:

If the time is long enough (10 hours or more), the device will run out of RAM

I guess the mechanism of re-render cause that things (not sure)

So, how can i reduce the amount of RAM the component uses?

question from:https://stackoverflow.com/questions/65936355/slider-taking-too-much-ram-which-leads-to-memory-leaks

Answer 1

Waitting for answers