React Native | useQuery Hook

Fetching data efficiently is one of the most common and most painful challenges in React Native development. Without the right tools, you end up with a tangle of useEffect calls, loading flags, error states, and stale cache bugs that make your codebase hard to maintain and your app feel sluggish.

React Native’s useQuery hook allows you to perform the same functionality in your React Native applications that useEffect does for synchronously obtaining data. UseQuery allows you to fetch data and cache data from APIs, and automatically refetch data from an API while helping to manage the loading and error states associated with request/response results.

What is useQuery?

useQuery is a hook that helps you:

• Fetch data from APIs
• Cache responses
• Auto-refetch data
• Handle loading & error states

Installation

npm install @tanstack/react-query

Setup

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MainApp />
    </QueryClientProvider>
  );
}

Example

import { useQuery } from '@tanstack/react-query';
import { Text, View, ActivityIndicator } from 'react-native';
const fetchUsers = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  return response.json();
};
export default function UsersScreen() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  });
  if (isLoading) return <ActivityIndicator />;
  if (error) return <Text>Error loading data</Text>;
  return (
    <View>
      {data.map(user => (
        <Text key={user.id}>{user.name}</Text>
      ))}
    </View>
  );
}

Refetch Data Manually

const { refetch } = useQuery({ queryKey: ['users'], queryFn: fetchUsers });
// Call anywhere
refetch();
Dynamic Query Example
const fetchUser = async (id) => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  return res.json();
};
const { data } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
});

Conclusion:

Whether you’re building a simple product listing or a complex real-time dashboard, adopting useQuery will make your code cleaner, your app faster, and your debugging sessions shorter.

FAQ

1. What is useQuery in React Native?

The useQuery hook is a React hook for fetching, caching, and synchronizing server-based data in a React Native application as an alternative to manually managing the data-fetching process with useEffect.

2. Which library provides the useQuery hook?

The useQuery hook is provided by TanStack Query. It is widely used in both React and React Native applications for efficient data management.