Question 1

useState hook ใน React คืออะไร?

Accepted Answer

useState คือ React hook ที่จัดการ state ภายในของ functional component ต่างจากตัวแปร JavaScript ทั่วไปที่ถูกรีเซ็ตในทุกการ render useState จะรักษาค่า state ไว้ระหว่างการ render ที่ต่อเนื่องกัน hook นี้คืนค่าเป็น array ที่ประกอบด้วยค่า state ปัจจุบันและฟังก์ชันสำหรับอัปเดต โดยจะทริกเกอร์การ render component ใหม่โดยอัตโนมัติเมื่อ state เปลี่ยนแปลง

Question 2

syntax ที่ถูกต้องในการประกาศ state ด้วย useState คืออะไร?

Accepted Answer

syntax ที่ถูกต้องใช้ array destructuring เพื่อแยกค่า state และฟังก์ชันอัปเดต ตามแบบแผน ฟังก์ชันอัปเดตจะมีคำนำหน้า 'set' ตามด้วยชื่อตัวแปร state ในรูปแบบ camelCase แบบแผนนี้ช่วยปรับปรุงความอ่านง่ายของโค้ดและได้รับการยอมรับอย่างแพร่หลายในชุมชน React ลำดับขององค์ประกอบในอาร์เรย์ที่ useState คืนค่ามาจะเหมือนกันเสมอ: ค่าปัจจุบันก่อน ฟังก์ชันอัปเดตที่สอง

Question 3

จะเกิดอะไรขึ้นเมื่อเรียกฟังก์ชันอัปเดต state?

Accepted Answer

เมื่อฟังก์ชันอัปเดต state ถูกเรียก React จะจัดกำหนดการ render component ใหม่ด้วยค่า state ใหม่ การอัปเดตไม่ได้เกิดขึ้นทันทีแต่เป็นแบบ asynchronous ซึ่งหมายความว่าค่า state จะไม่ถูกเปลี่ยนแปลงทันทีหลังจากการเรียก React จะรวมการอัปเดต state หลายรายการเพื่อเพิ่มประสิทธิภาพและหลีกเลี่ยงการ render ที่ไม่จำเป็น กลยุทธ์ batching นี้ช่วยปรับปรุงประสิทธิภาพของแอปพลิเคชันอย่างมีนัยสำคัญ

React Hooks

useState hook ใน React คืออะไร?

คำตอบ

syntax ที่ถูกต้องในการประกาศ state ด้วย useState คืออะไร?

คำตอบ

จะเกิดอะไรขึ้นเมื่อเรียกฟังก์ชันอัปเดต state?

คำตอบ

จะอัปเดต state โดยอิงจากค่าก่อนหน้าได้อย่างไร?

สามารถใช้หลาย useState ในคอมโพเนนต์เดียวกันได้ไหม?

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

พื้นฐาน JavaScript

พื้นฐาน React

วงจรชีวิตของ 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

Zustand State Management

การเพิ่มประสิทธิภาพ React

Error Boundaries & การจัดการข้อผิดพลาด

Advanced React Patterns

ฟีเจอร์ขั้นสูงของ Next.js

การ Deploy & Production ของ Next.js

Architecture & Design Patterns

React Server Components

การแปลภาษา Next.js

React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด

เชี่ยวชาญ React / Next.js สำหรับการสัมภาษณ์ครั้งถัดไป