# Zustand State Management (React / Next.js)

> Zustand store, create, selectors, actions, middleware, devtools, persistence

- 18 คำถามสัมภาษณ์
- Mid-Level
- [คำถามสัมภาษณ์: React / Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions.md)

## 1. Zustand คืออะไร?

**คำตอบ**

Zustand เป็นไลบรารี state management แบบมินิมอลสำหรับ React ที่ไม่ต้องใช้ Provider ต่างจาก Redux หรือ Context API มันมี API ที่เรียบง่ายบน hooks และฟังก์ชัน create() พร้อม bundle size ที่เล็กมาก (น้อยกว่า 1KB) Zustand ช่วยจัดการ state แบบ global ได้โดยไม่ต้องมีความซับซ้อนทางสถาปัตยกรรมของ Redux และหลีกเลี่ยงปัญหาด้านประสิทธิภาพของ Context API

## 2. จะสร้าง Zustand store พื้นฐานได้อย่างไร?

**คำตอบ**

ฟังก์ชัน create() ใช้สำหรับการสร้าง Zustand store โดยรับ callback function ที่ได้รับ set และ get เป็นพารามิเตอร์ ช่วยให้คุณกำหนด state เริ่มต้นและ actions ได้ store ที่ส่งกลับมาเป็น React hook ที่สามารถใช้ได้โดยตรงในคอมโพเนนต์ วิธีนี้ช่วยลดความจำเป็นของ boilerplate เช่น action creators หรือ reducers จาก Redux

## 3. จะเข้าถึง state ของ Zustand store ในคอมโพเนนต์ได้อย่างไร?

**คำตอบ**

store ที่สร้างด้วย create() จะส่งกลับ React hook ที่สามารถเรียกใช้ได้โดยตรงใน functional component hook นี้รับ selector เสริมเพื่อดึงเฉพาะส่วนของ state ที่ต้องการ หากไม่มี selector จะส่งกลับ state ทั้งหมด แต่อาจทำให้เกิด re-render ที่ไม่จำเป็น แนวทาง hook-first ทำให้ Zustand ใช้งานง่ายสำหรับนักพัฒนา React สมัยใหม่

## มีอีก 15 คำถาม

- บทบาทของ selector ใน Zustand คืออะไร?
- จะหลีกเลี่ยง re-render ที่ไม่จำเป็นด้วย selector ได้อย่างไร?

สมัครฟรี: https://sharpskill.dev/th/login

## หัวข้อสัมภาษณ์ React / Next.js อื่นๆ

- [พื้นฐาน JavaScript](https://sharpskill.dev/th/technologies/react-next/interview-questions/javascript-essentials.md): 25 คำถาม, Junior
- [พื้นฐาน React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-fundamentals.md): 20 คำถาม, Junior
- [React Hooks](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-hooks.md): 22 คำถาม, Junior
- [วงจรชีวิตของ component](https://sharpskill.dev/th/technologies/react-next/interview-questions/component-lifecycle.md): 18 คำถาม, Junior
- [React Router](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-router.md): 20 คำถาม, Junior
- [การจัดการ state ด้วย Context](https://sharpskill.dev/th/technologies/react-next/interview-questions/state-management-context.md): 18 คำถาม, Junior
- [ฟอร์มและ Controlled Components](https://sharpskill.dev/th/technologies/react-next/interview-questions/forms-controlled-components.md): 20 คำถาม, Mid-Level
- [การดึงข้อมูลและ API](https://sharpskill.dev/th/technologies/react-next/interview-questions/fetching-data-api.md): 20 คำถาม, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-query-tanstack.md): 20 คำถาม, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/th/technologies/react-next/interview-questions/styling-css-in-js.md): 18 คำถาม, Mid-Level
- [พื้นฐาน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25 คำถาม, Mid-Level
- [TypeScript กับ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/typescript-react.md): 20 คำถาม, Mid-Level
- [การดึงข้อมูล Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24 คำถาม, Mid-Level
- [Server Actions ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-server-actions.md): 20 คำถาม, Mid-Level
- [การกำหนดเส้นทางและการนำทางใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22 คำถาม, Mid-Level
- [API Routes ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-api-routes.md): 20 คำถาม, Mid-Level
- [Metadata & SEO ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18 คำถาม, Mid-Level
- [Middleware และ Auth ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22 คำถาม, Mid-Level
- [การทดสอบ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-testing.md): 20 คำถาม, Mid-Level
- [การเพิ่มประสิทธิภาพ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-performance-optimization.md): 22 คำถาม, Senior
- [Error Boundaries & การจัดการข้อผิดพลาด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-error-boundaries.md): 18 คำถาม, Senior
- [Advanced React Patterns](https://sharpskill.dev/th/technologies/react-next/interview-questions/advanced-react-patterns.md): 20 คำถาม, Senior
- [ฟีเจอร์ขั้นสูงของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24 คำถาม, Senior
- [การ Deploy & Production ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20 คำถาม, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-architecture-patterns.md): 22 คำถาม, Senior
- [React Server Components](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-server-components.md): 26 คำถาม, Senior
- [การแปลภาษา Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-internationalization.md): 20 คำถาม, Senior
- [React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-security-best-practices.md): 22 คำถาม, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/th/technologies/react-next/interview-questions/zustand-state-management