Run Fetch At Regular Intervals Using React

I have a grid with different react components, all independant - in that they fetch their own data and display it. I wanted to somehow make them automatically refetch and update ev

Solution 1:

Since useFetch encapsulates the fetching logic for a single component, makes sense that each component manages it's own interval. You can achieve that by declaring on mount an interval which will be triggered fifteen minutes later.

useEffect(() =>{
    let interval = setInterval(() => setReload(true), (1000 * 60 * 15))
    //destroy interval on unmount
    return () => clearInterval(interval)
})

More about useEffect (including effect cleanup as above) in the documentation.

Solution 2:

You need a useInterval hook. This post explains exactly why and how: https://overreacted.io/making-setinterval-declarative-with-react-hooks/