# React Hooks (React / Next.js)

> useState, useEffect, useContext, useRef, useCallback, useMemo, custom hooks

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

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

**คำตอบ**

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

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

**คำตอบ**

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

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

**คำตอบ**

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

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

- จะอัปเดต state โดยอิงจากค่าก่อนหน้าได้อย่างไร?
- สามารถใช้หลาย useState ในคอมโพเนนต์เดียวกันได้ไหม?

สมัครฟรี: 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
- [วงจรชีวิตของ 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
- [Zustand State Management](https://sharpskill.dev/th/technologies/react-next/interview-questions/zustand-state-management.md): 18 คำถาม, 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/react-hooks