title: React Native UseState Array Clear
body: <p>I have the following code - the idea is to create an animated polyline (for a map). I found some stuff in the internet, but it was with the "old" methods/without <code>useEffect</code>, <code>useState</code>...
  I can´t clear the <code>polylinePath</code> array in the <code>else</code> - I am trying to print out the current length, but it always returns the initial state length from <code>props.Direction</code>. Can you help me? I have no idea why my AnimatedPolyline isn´t working.</p>
  
  <pre><code> import React, { useState, useEffect, Fragment } from 'react';
  import { Polyline } from 'react-native-maps';
  
  export default function AnimatedPolyline(props) {
    const [polylinePath, setPolylinePath] = useState(props.Direction);
  
    useEffect(() =&gt; {
      const interval = setInterval(() =&gt; {
        animatePolylineStart();
     }, 70);
      return () =&gt; clearInterval(interval);
    }, [props.Direction]); //tried [], too
  
     const animatePolylineStart = () =&gt; {
        if (polylinePath.length &lt; props.Direction.length) {
           const Direction = props.Direction;
           const polylinePathTemp = [
              ...Direction.slice(0, polylinePath.length - 1)
           ];
  
           setPolylinePath(polylinePathTemp);
        } else {
           setPolylinePath([]);
        }
     };
        return (
           &lt;Fragment&gt;
              {
                 (polylinePath.length &gt; 0) &amp;&amp; &lt;Polyline
                    coordinates={polylinePath}
                    strokeColor="#484848"
                    strokeWidth={5}
                 /&gt;
              }
           &lt;/Fragment&gt;
        );
    }
  </code></pre>