Fetching information in React typically means utilizing stale state and sophisticated caching logic.

React Question simplifies information fetching with highly effective options like automated caching, deduplication, and background updates.

Let’s discover some key options of React Question:

Declarative Knowledge Fetching

Fetch information with the useQuery hook:

import { useQuery } from 'react-query';

operate MyComponent() {
  const { information, error, isLoading } = useQuery('posts', fetchPosts);
  
  // use information  
}

useQuery handles declaring cache keys, performing fetches, and extra.

background Refetching

React Question routinely refetches “inactive” queries within the background:

// frontend
useQuery('consumer', fetchUser); 

// background
// periodically refetches consumer

Stale information is up to date with out blocking the UI.

Request Deduplication

Duplicate requests are deduped to forestall wasteful refetches:

operate PageOne() {
  useQuery('posts', fetchPosts);
}

operate PageTwo() {
  useQuery('posts', fetchPosts); // not duplicated
}

React Question shares cache outcomes throughout parts.

Optimistic Updates

Mutations can replace the cache optimistically earlier than fetching:

const mutation = useMutation(addPost, {
  onMutate: newPost => {
    // replace cache instantly 
  },
  onError: (err, newPost, context) => {
    // rollback optimistic replace 
  },
});

This makes the UI really feel quick and responsive.

Abstract

• Simplifies information fetching with useQuery
• Refetches stale information in background
• Deduplicates requests routinely
• Optimistic updates make UI really feel snappy

React Question takes the ache out of async information administration!