React Query

React Query < Tanstack query >

Description

what is it ? : React Library to handle Data fetching, caching, and updates. It handles caching, background updates and stale data out of the box . It also Structure you data and make it available anywhere in the Application Thanks to the QueryClient

URL : official website (opens in a new tab)
version :4.0.1
Why ?:

  • We don't use Redux, thus we replaced RTK Query with React-query, making data availabe everywhere in the application thanks to the Query-client.
  • Performance optimizations like pagination and lazy loading data
  • Potentially helps save on bandwidth and increase memory performance
  • Declarative but still very customizable.
  • Reflecting updates to data as quickly as possible.

Application

// Getting list of movies, and populating the Cache with index "movies"
const { data, error, isError, isFetching, isLoading, refetch } = useQuery(
  'movies', // cached data index (to invalidate it in the future)
  () => axios.get(url).then(res => res.data) // fetcher
);