Polling API every x seconds with react

by

Well, since you have only an API and don’t have control over it in order to change it to use sockets, the only way you have is to poll.

As per your polling is concerned, you’re doing the decent approach. But there is one catch in your code above.

componentDidMount() {
  this.timer = setInterval(()=> this.getItems(), 1000);
}

componentWillUnmount() {
  this.timer = null; // here...
}

getItems() {
  fetch(this.getEndpoint('api url endpoint'))
    .then(result => result.json())
    .then(result => this.setState({ items: result }));
}

The issue here is that once your component unmounts, though the reference to interval that you stored in this.timer is set to null, it is not stopped yet. The interval will keep invoking the handler even after your component has been unmounted and will try to setState in a component which no longer exists.

To handle it properly use clearInterval(this.timer) first and then set this.timer = null.

Also, the fetch call is asynchronous, which might cause the same issue. Make it cancelable and cancel if any fetch is incomplete.

I hope this helps.

More Related Contents:

  1. Unable to access React instance (this) inside event handler [duplicate]
  2. Why do we need middleware for async flow in Redux?
  3. Make React useEffect hook not run on initial render
  4. Push method in React Hooks (useState)?
  5. Rendering raw html with reactjs
  6. Correct way to handle conditional styling in React
  7. Intercept/handle browser’s back button in React-router?
  8. Is it possible to share states between components using the useState() hook in React?
  9. react router doesn’t work in aws s3 bucket
  10. Multiple path names for a same component in React Router
  11. How do you send images to node js with Axios?
  12. React useState hook event handler using initial state
  13. Why IE 11 display blank page rendering react app
  14. Unable to use Arrow functions inside React component class [duplicate]
  15. How to disable button in React.js
  16. how to listen for route change in react-router-dom v6
  17. How to use create-react-app with an older React version?
  18. How can I use Jest to spy on a method call?
  19. React: Script tag not working when inserted using dangerouslySetInnerHTML
  20. How do I add validation to the form in my React component?
  21. Webpack breaking change
  22. Type ‘void’ is not assignable to type ‘((event: MouseEvent) => void) | undefined’
  23. Highlight text using ReactJS
  24. How to disable the selection of an item when the first letter of the option is pressed in the Select component?
  25. React: ‘Redirect’ is not exported from ‘react-router-dom’
  26. Dynamically Rendering a React component
  27. How to have nested loops with map in JSX?
  28. Performance penalty of creating handlers on every render with react-hooks
  29. Function inside functional component in React hooks – Performance
  30. How to programmatically fill input elements built with React?

Leave a Comment