Fetching information in React usually means utilizing stale state and complicated 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 Information Fetching
Fetch information with the useQuery
hook:
import { useQuery } from 'react-query';
perform MyComponent() {
const { information, error, isLoading } = useQuery('posts', fetchPosts);
// use information
}
useQuery
handles declaring cache keys, performing fetches, and extra.
background Refetching
React Question mechanically 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 stop wasteful refetches:
perform PageOne() {
useQuery('posts', fetchPosts);
}
perform PageTwo() {
useQuery('posts', fetchPosts); // not duplicated
}
React Question shares cache outcomes throughout elements.
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 mechanically
- Optimistic updates make UI really feel snappy
React Question takes the ache out of async information administration!