title: How to avoid Slow setInterval?
body: <p>I have a Voice URL I got it from Database and want to play it using react-native-sound, </p>
  
  <p>So I make a reusable component that renders a play icon and duration "without animation right now"</p>
  
  <p><a href="https://i.stack.imgur.com/gKAYc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gKAYc.png" alt="UI"></a></p>
  
  <p>so after the sound play, I change play icon first then run <code>setInterval</code> to increase count every second +1</p>
  
  <p>but it's too slow at first to change icon and the real duration in seconds: <strong>11</strong> but the <strong>timer</strong> stops in 9 </p>
  
  <p>So how can I make it faster...</p>
  
  <p>Code</p>
  
  <pre><code>this.state = {
        playingNow: false,
        spinValue: new Animated.Value(0),
        timer: 0,
      };
  
  //   get URL sound from DB then play it :)
    play = async () =&gt; {
      const {VoiceURL} = this.props;
      console.log('Play Func Object:', VoiceURL);
      const sound = new Sound(VoiceURL, '', error =&gt; {
        if (error) {
          console.log('failed to load the sound', error);
          return;
        } else {
          // Animated.timing(this.state.spinValue, {
          //   toValue: 1,
          //   duration: sound. _duration * 1100 || 1000,
          //   easing: Easing.linear,
          //   useNativeDriver: true,
          // }).start(() =&gt; {
          //   this.state.spinValue.setValue(0);
          // });
          this.interval = setInterval(
            () =&gt;
              this.setState({
                playingNow: true,
                timer: this.state.timer + 1,
              }),
            1000,
          );
          sound.play(success =&gt; {
            if (success) {
              //   That's mean sound is finish
              console.log('success?', success);
              this.setState(
                {playingNow: false, timer: 0},
                () =&gt; sound.stop(),
                clearInterval(this.interval),
              );
              console.log('successfully finished playing');
            } else {
              console.log('playback failed due to audio decoding errors');
            }
          });
          console.log(
            'duration in seconds: ' +
              sound.getDuration() +
              'number of channels: ' +
              sound.getNumberOfChannels(),
          );
          sound.getCurrentTime(seconds =&gt; console.log('at: ' + seconds));
        }
        sound.setNumberOfLoops(0);
      });
      console.log('in_play??', sound);
      return sound;
    };
  </code></pre>
  
  <p><strong>That's render a UI</strong></p>
  
  <pre><code>  _renderPlayButton = onPress =&gt; {
      const {timer} = this.state;
      let icon = this.state.playingNow ? 'pause' : 'play-arrow';
      // const spin = this.state.spinValue.interpolate({
      //   inputRange: [0, 1],
      //   outputRange: [0, -120],
      // });
      return (
        &lt;View
          style={{
            opacity: this.props.opacity,
            alignItems: 'center',
            flexDirection: 'row',
          }}&gt;
          &lt;TouchableOpacity
            style={{backgroundColor: '#1E558E', borderRadius: 100}}
            onPress={onPress}&gt;
            &lt;Icon name={icon} color="#fff" size={25} style={{padding: 2}} /&gt;
          &lt;/TouchableOpacity&gt;
          &lt;View
            style={{flexDirection: 'row', marginLeft: 5, alignItems: 'center'}}&gt;
            {/* &lt;Animated.View
              style={{
                backgroundColor: '#f00',
                borderRadius: 10,
                width: 15,
                height: 15,
                zIndex: 10,
                transform: [{translateX: spin}],
              }}
            /&gt; */}
            &lt;View
              style={{
                width: 120,
                backgroundColor: '#a7a7a7',
                height: 2,
              }}
            /&gt;
            &lt;Text style={{color: '#777', marginBottom: 5, marginLeft: 10}}&gt;
              00:
              {('0' + (timer || 0)).slice(-2)}
              {console.log('timer-state:', timer)}
            &lt;/Text&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    };
  </code></pre>
  
  <p>JSX</p>
  
  <pre><code>      &lt;View&gt;
          {this._renderPlayButton(() =&gt; {
            this.play();
          })}
        &lt;/View&gt;
  </code></pre>