Zustand State Management
Zustand store, create, selectors, actions, middleware, devtools, persistence
1Zustand คืออะไร?
Zustand คืออะไร?
คำตอบ
Zustand เป็นไลบรารี state management แบบมินิมอลสำหรับ React ที่ไม่ต้องใช้ Provider ต่างจาก Redux หรือ Context API มันมี API ที่เรียบง่ายบน hooks และฟังก์ชัน create() พร้อม bundle size ที่เล็กมาก (น้อยกว่า 1KB) Zustand ช่วยจัดการ state แบบ global ได้โดยไม่ต้องมีความซับซ้อนทางสถาปัตยกรรมของ Redux และหลีกเลี่ยงปัญหาด้านประสิทธิภาพของ Context API
2จะสร้าง Zustand store พื้นฐานได้อย่างไร?
จะสร้าง Zustand store พื้นฐานได้อย่างไร?
คำตอบ
ฟังก์ชัน create() ใช้สำหรับการสร้าง Zustand store โดยรับ callback function ที่ได้รับ set และ get เป็นพารามิเตอร์ ช่วยให้คุณกำหนด state เริ่มต้นและ actions ได้ store ที่ส่งกลับมาเป็น React hook ที่สามารถใช้ได้โดยตรงในคอมโพเนนต์ วิธีนี้ช่วยลดความจำเป็นของ boilerplate เช่น action creators หรือ reducers จาก Redux
3จะเข้าถึง state ของ Zustand store ในคอมโพเนนต์ได้อย่างไร?
จะเข้าถึง state ของ Zustand store ในคอมโพเนนต์ได้อย่างไร?
คำตอบ
store ที่สร้างด้วย create() จะส่งกลับ React hook ที่สามารถเรียกใช้ได้โดยตรงใน functional component hook นี้รับ selector เสริมเพื่อดึงเฉพาะส่วนของ state ที่ต้องการ หากไม่มี selector จะส่งกลับ state ทั้งหมด แต่อาจทำให้เกิด re-render ที่ไม่จำเป็น แนวทาง hook-first ทำให้ Zustand ใช้งานง่ายสำหรับนักพัฒนา React สมัยใหม่
บทบาทของ selector ใน Zustand คืออะไร?
จะหลีกเลี่ยง re-render ที่ไม่จำเป็นด้วย selector ได้อย่างไร?
+15 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ React / Next.js อื่นๆ
พื้นฐาน JavaScript
พื้นฐาน React
React Hooks
วงจรชีวิตของ component
React Router
การจัดการ state ด้วย Context
ฟอร์มและ Controlled Components
การดึงข้อมูลและ API
React Query (TanStack Query)
Styling & CSS-in-JS
พื้นฐาน Next.js
TypeScript กับ React
การดึงข้อมูล Next.js
Server Actions ของ Next.js
การกำหนดเส้นทางและการนำทางใน Next.js
API Routes ใน Next.js
Metadata & SEO ใน Next.js
Middleware และ Auth ใน Next.js
การทดสอบ React
การเพิ่มประสิทธิภาพ React
Error Boundaries & การจัดการข้อผิดพลาด
Advanced React Patterns
ฟีเจอร์ขั้นสูงของ Next.js
การ Deploy & Production ของ Next.js
Architecture & Design Patterns
React Server Components
การแปลภาษา Next.js
React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด
เชี่ยวชาญ React / Next.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี