Why React Query for data fetching in React Native? - Purpose & Use Cases

The Big Idea

What if your app could magically keep data fresh without you writing extra code?

The Scenario

Imagine building a mobile app that shows a list of your favorite movies. You write code to fetch the movie data from the internet every time the screen loads. But if the user goes back and forth between screens, your app keeps fetching the same data again and again.

The Problem

This manual way is slow and clunky. You have to write lots of code to handle loading states, errors, and refreshing data. It's easy to make mistakes like showing old data or making too many network requests, which wastes battery and data.

The Solution

React Query helps by managing all the data fetching for you. It automatically caches data, updates it in the background, and keeps your app fast and smooth without extra work. You just ask for the data, and React Query handles the rest.

Before vs After

✗ Before

useEffect(() => {
  fetch('https://api.example.com/movies')
    .then(res => res.json())
    .then(data => setMovies(data))
    .catch(err => setError(err));
}, []);

✓ After

const { data, error, isLoading } = useQuery('movies', () => fetch('https://api.example.com/movies').then(res => res.json()));

What It Enables

With React Query, your app can fetch and update data effortlessly, giving users a smooth experience with fresh content and less waiting.

Real Life Example

Think of a news app that shows the latest headlines. React Query keeps the news updated in the background, so when you open the app, the newest stories appear instantly without delays or extra loading screens.

Key Takeaways

Manual data fetching requires lots of code and careful handling.

React Query automates caching, updating, and error handling.

This makes your app faster, simpler, and more reliable.