React Query

React Query simplifies data fetching and caching.

Install

```bash npm install @tanstack/react-query ```

Setup

```javascript import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() { return ( <QueryClientProvider client={queryClient}> <Users /> </QueryClientProvider> ); } ```

Fetching Data

```javascript import { useQuery } from '@tanstack/react-query';

function Users() { const { data, isLoading, error } = useQuery({ queryKey: ['users'], queryFn: () => fetch('/api/users').then(res => res.json()) });

if (isLoading) return <p>Loading...</p>; if (error) return <p>Error: {error.message}</p>;

return ( <div> {data.map(user => <p key={user.id}>{user.name}</p>)} </div> ); } ```

Mutations

```javascript import { useMutation, useQueryClient } from '@tanstack/react-query';

function CreateUser() { const queryClient = useQueryClient();

const mutation = useMutation({ mutationFn: (newUser) => fetch('/api/users', { method: 'POST', body: JSON.stringify(newUser) }), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['users'] }); } });

return ( <button onClick={() => mutation.mutate({ name: 'John' })}> Add User </button> ); } ```

Remember

- Automatic caching - Background refetching - Optimistic updates - Better than useState + useEffect

> Next: Learn state management with Zustand!