Bueno, dado que solo tiene una API y no tiene control sobre ella para cambiarla para usar sockets, la única forma que tiene es sondear.

En lo que respecta a su encuesta, está haciendo un enfoque decente. Pero hay una trampa en su código anterior.

 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 })); }

El problema aquí es que una vez que su componente se desmonta, aunque la referencia al intervalo que almacenó en this.timer se establece en null , aún no se detiene. El intervalo seguirá invocando al controlador incluso después de que su componente haya sido desmontado e intentará setState en un componente que ya no existe.

Para manejarlo correctamente, use clearInterval(this.timer) primero y luego establezca this.timer = null .

Además, la llamada de fetch es asíncrona, lo que podría causar el mismo problema. Hágalo cancelable y cancélelo si alguna fetch está incompleta.

Espero que esto ayude.

Aunque era una vieja pregunta, fue el resultado principal cuando busqué React Polling y no encontré una respuesta que funcionara con Hooks.

 // utils.js import React, { useState, useEffect, useRef } from 'react'; export const useInterval = (callback, delay) => { const savedCallback = useRef(); useEffect(() => { savedCallback.current = callback; }, [callback]); useEffect(() => { function tick() { savedCallback.current(); } if (delay !== null) { const id = setInterval(tick, delay); return () => clearInterval(id); } }, [delay]); }

Fuente: https://overreacted.io/making-setinterval-declarative-with-react-hooks/

Luego puede simplemente importar y usar.

 // MyPage.js import useInterval from '../utils'; const MyPage = () => { useInterval(() => { // put your interval code here. }, 1000 * 10); return <div>my page content</div>; }

Podría usar una combinación de setTimeout y clearTimeout .

setInterval dispararía la llamada API cada 'x' segundos, independientemente de si la llamada anterior tuvo éxito o falló. Esto puede consumir la memoria de su navegador y degradar el rendimiento con el tiempo. Además, si el servidor está inactivo, setInterval continuaría bombardeando el servidor sin conocer su estado inactivo.

Mientras,

Podrías hacer una recursión usando setTimeout . Activar una llamada a la API posterior, solo si la llamada a la API anterior tiene éxito. Si la llamada anterior ha fallado, borre el tiempo de espera y no realice más llamadas. si es necesario, alertar al usuario sobre la falla. Deje que el usuario actualice la página para reiniciar este proceso.

Aquí hay un código de ejemplo:

 let apiTimeout = setTimeout(fetchAPIData, 1000); function fetchAPIData(){ fetch('API_END_POINT') .then(res => { if(res.statusCode == 200){ // Process the response and update the view. // Recreate a setTimeout API call which will be fired after 1 second. apiTimeout = setTimeout(fetchAPIData, 1000); }else{ clearTimeout(apiTimeout); // Failure case. If required, alert the user. } }) .fail(function(){ clearTimeout(apiTimeout); // Failure case. If required, alert the user. }); }