# React Query (TanStack Query) (React / Next.js)

> useQuery, useMutation, invalidation, cache, refetch, status loading/error, optimistic updates, query keys, pagination

- 20 pertanyaan wawancara
- Mid-Level
- [Pertanyaan Wawancara: React / Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara.md)

## 1. Apa peran utama useQuery di React Query?

**Jawaban**

useQuery adalah hook dasar untuk mengambil data read-only dari API atau sumber data. Hook ini secara otomatis mengelola cache, status loading, error, dan strategi refetch. Berbeda dengan useEffect menggunakan fetch, useQuery mengoptimalkan performa dengan menghindari request berlebihan melalui sistem cache cerdasnya.

## 2. Hook apa yang digunakan untuk melakukan mutation POST ke API?

**Jawaban**

useMutation adalah hook yang didedikasikan untuk operasi tulis seperti POST, PUT, PATCH atau DELETE. Hook ini menyediakan callback onSuccess, onError dan onMutate untuk mengelola siklus hidup mutation. Berbeda dengan useQuery yang ditujukan untuk membaca, useMutation tidak memicu request secara otomatis dan memerlukan pemanggilan eksplisit ke fungsi mutate.

## 3. Apa tujuan dari query key di React Query?

**Jawaban**

query key adalah identifier unik yang memungkinkan React Query mengelola cache dan dependensi antar query. Fungsinya untuk mengidentifikasi, meng-invalidate, dan me-refetch query tertentu. query key bisa berupa string sederhana atau array yang menyertakan parameter dinamis. Mengubah query key secara otomatis memicu fetch baru, sehingga dependensi dapat dikelola secara deklaratif.

## 17 pertanyaan lagi tersedia

- Apa yang dimaksud staleTime dalam konfigurasi useQuery?
- Properti apa yang menunjukkan bahwa useQuery sedang loading?

Daftar gratis: https://sharpskill.dev/id/login

## Topik wawancara React / Next.js lainnya

- [Dasar-Dasar JavaScript](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/javascript-essentials.md): 25 pertanyaan, Junior
- [Dasar-Dasar React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-fundamentals.md): 20 pertanyaan, Junior
- [React Hooks](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-hooks.md): 22 pertanyaan, Junior
- [Siklus hidup komponen](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/component-lifecycle.md): 18 pertanyaan, Junior
- [React Router](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-router.md): 20 pertanyaan, Junior
- [Manajemen state dengan Context](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/state-management-context.md): 18 pertanyaan, Junior
- [Form & Controlled Components](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/forms-controlled-components.md): 20 pertanyaan, Mid-Level
- [Pengambilan Data & API](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/fetching-data-api.md): 20 pertanyaan, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/styling-css-in-js.md): 18 pertanyaan, Mid-Level
- [Dasar-dasar Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-fundamentals.md): 25 pertanyaan, Mid-Level
- [TypeScript dengan React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/typescript-react.md): 20 pertanyaan, Mid-Level
- [Data Fetching Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-data-fetching.md): 24 pertanyaan, Mid-Level
- [Server Actions Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-server-actions.md): 20 pertanyaan, Mid-Level
- [Routing & Navigasi Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-routing-navigation.md): 22 pertanyaan, Mid-Level
- [API Routes Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-api-routes.md): 20 pertanyaan, Mid-Level
- [Metadata & SEO di Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-metadata-seo.md): 18 pertanyaan, Mid-Level
- [Middleware & Auth di Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-middleware-auth.md): 22 pertanyaan, Mid-Level
- [Pengujian React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-testing.md): 20 pertanyaan, Mid-Level
- [Zustand State Management](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/zustand-state-management.md): 18 pertanyaan, Mid-Level
- [Optimasi Performa React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-performance-optimization.md): 22 pertanyaan, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-error-boundaries.md): 18 pertanyaan, Senior
- [Advanced React Patterns](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/advanced-react-patterns.md): 20 pertanyaan, Senior
- [Fitur Lanjutan Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-advanced-features.md): 24 pertanyaan, Senior
- [Deployment & Produksi Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-deployment-production.md): 20 pertanyaan, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-architecture-patterns.md): 22 pertanyaan, Senior
- [React Server Components](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-server-components.md): 26 pertanyaan, Senior
- [Internasionalisasi Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-internationalization.md): 20 pertanyaan, Senior
- [Keamanan React & Praktik Terbaik](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-security-best-practices.md): 22 pertanyaan, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-query-tanstack