How to setInterval for every 5 second render with React hook useEffect in React Native app?

by

You need to clear your interval,

useEffect(() => {
  const intervalId = setInterval(() => {  //assign interval to a variable to clear it.
    setState(state => ({ data: state.data, error: false, loading: true }))
    fetch(url)
      .then(data => data.json())
      .then(obj =>
        Object.keys(obj).map(key => {
          let newData = obj[key]
          newData.key = key
          return newData
        })
     )
     .then(newData => setState({ data: newData, error: false, loading: false }))
     .catch(function(error) {
        console.log(error)
        setState({ data: null, error: true, loading: false })
     })
  }, 5000)

  return () => clearInterval(intervalId); //This is important
 
}, [url, useState])

For more about cleanup functions in useEffect refer to this.

More Related Contents:

  1. How to call loading function with React useEffect only once
  2. Where can I make API call with hooks in react?
  3. How to register event with useEffect hooks?
  4. How can I force a component to re-render with hooks in React?
  5. How to prevent re-rendering of components that have not changed?
  6. What is useState() in React?
  7. Do we still need functional setState way in react hooks?
  8. setTimeout or setInterval?
  9. React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
  10. Javascript setInterval and `this` solution
  11. How can I use multiple refs for an array of elements with hooks?
  12. Pass parameters in setInterval function
  13. Jquery/Ajax call with timer
  14. JavaScript setTimeout() won’t wait to Execute? [duplicate]
  15. Using an authorization header with Fetch in React Native
  16. Executing async code on update of state with react-hooks
  17. Why React Hook useState uses const and not let
  18. When is it appropriate to use a constructor in REACT?
  19. How to change the value of a Context with useContext?
  20. React.createClass vs. ES6 arrow function
  21. Is it an anti-pattern to define a function component inside the render() function?
  22. unable to scroll in scrollView
  23. How to clear react-native cache?
  24. React hooks: call component as function vs render as element
  25. React hooks useState setValue still rerender one more time when value is equal
  26. ‘expo’ is not recognized as an internal or external command
  27. TypeError: cli.init is not a function for react native
  28. TypeError dispatcher.useState is not a function when using React Hooks
  29. UseEffect being called multiple times
  30. Focus style for TextInput in react-native

Leave a Comment