- react-use-most-recent-fetch-hook.md

React useMostRecentFetch hook

A hook for fetching data where only the response from the most recent fetch request is needed.

When the arguments are updated, a new fetch request is triggered and the previous one is aborted and ignored.

This is useful in situations where a user might make selections in the UI that trigger multiple fetch requests. For example, selecting from a group of filters which then fetches new data from an API. In this situation, only the most recent selection is relevant.

Example usage

const { data, error, loading } = useMostRecentFetch('https://example.com/api', {
  method: 'POST',
  body: JSON.stringify({ filter1: 'value', filter2: 'value' })
})

use-fetch.jsx

import { useState, useEffect, useRef } from 'react

function useMostRecentFetch(url, options = {}) {
  const abortController = useRef(new AbortController())

  const [data, setData] = useState(null)
  const [error, setError] = useState(null)
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    abortController.current.abort()
    abortController.current = new AbortController()

    setLoading(true)

    fetch(url, {
      ...options,
      signal: abortController.current.signal
    })
      .then(res => res.json())
      .then(data => {
        setLoading(false)
        setData(data)
      })
      .catch(err => {
        if (err.name === 'AbortError') {
          return
        }
        setLoading(false)
        setError(err.message)
      })
  }, [url, options])

  return { data, error, loading }
}

export default useMostRecentFetch