title: How to setInterval for every 5 second render with React hook useEffect in React Native app?
body: <p>I have <code>React Native</code> app and I get data from <code>API</code> by <code>fetch</code>. I created custom hook that get data from <code>API</code>. And i need to re-render it every 5 seconds. For it I wrapped my custom hook to setInterval and after my app become work very slowly and when I navigate to another screen I get this error: </p>
  
  <blockquote>
    <p>Can't perform a React state update on an unmounted component. This is
    a no-op, but it indicates a memory leak in your application. To fix,
    cancel all subscriptions and asynchronous tasks in a useEffect cleanup
    function.</p>
  </blockquote>
  
  <p>Can you tell me please how can I solve this bug and which will be the best way to <code>setInterval</code>, because I think my way is not good.</p>
  
  <p><strong>My custom hook:</strong></p>
  
  <pre><code>export const useFetch = url =&gt; {
    const [state, setState] = useState({ data: null, error: false, loading: true })
  
    useEffect(() =&gt; {
      setInterval(() =&gt; {
        setState(state =&gt; ({ data: state.data, error: false, loading: true }))
        fetch(url)
          .then(data =&gt; data.json())
          .then(obj =&gt;
            Object.keys(obj).map(key =&gt; {
              let newData = obj[key]
              newData.key = key
              return newData
            })
          )
          .then(newData =&gt; setState({ data: newData, error: false, loading: false }))
          .catch(function(error) {
            console.log(error)
            setState({ data: null, error: true, loading: false })
          })
      }, 5000)
    }, [url, useState])
    useEffect(() =&gt; () =&gt; console.log('unmount'), [])
    return state
  }
  </code></pre>
  
  <p><strong>My Component:</strong></p>
  
  <pre><code>const ChartsScreen = ({ navigation }) =&gt; {
    const { container } = styles
    const url = 'https://poloniex.com/public?command=returnTicker'
    const { data, error, loading } = useFetch(url)
  
    const percentColorHandler = number =&gt; {
      return number &gt;= 0 ? true : false
    }
  
    return (
      &lt;View style={container}&gt;
        &lt;ProjectStatusBar /&gt;
        &lt;IconsHeader
          dataError={false}
          header="Charts"
          leftIconName="ios-arrow-back"
          leftIconPress={() =&gt; navigation.navigate('Welcome')}
        /&gt;
        &lt;ChartsHeader /&gt;
        &lt;ActivityIndicator animating={loading} color="#068485" style={{ top: HP('30%') }} size="small" /&gt;
        &lt;FlatList
          data={data}
          keyExtractor={item =&gt; item.key}
          renderItem={({ item }) =&gt; (
            &lt;CryptoItem
              name={item.key}
              highBid={item.highestBid}
              lastBid={item.last}
              percent={item.percentChange}
              percentColor={percentColorHandler(item.percentChange)}
            /&gt;
          )}
        /&gt;
      &lt;/View&gt;
    )
  }
  
  </code></pre>