Question 1

ความแตกต่างหลักระหว่าง let กับ var คืออะไร?

Accepted Answer

let ประกาศตัวแปรที่มีขอบเขตระดับบล็อก หมายความว่าตัวแปรจะมีอยู่เฉพาะภายในบล็อกที่ถูกกำหนด (ระหว่างวงเล็บปีกกา) var มีขอบเขตระดับฟังก์ชัน ซึ่งอาจทำให้เกิดบั๊กที่ไม่คาดคิดเพราะตัวแปรสามารถเข้าถึงได้ตลอดทั้งฟังก์ชัน การใช้ let เป็นค่าเริ่มต้นจะช่วยป้องกันปัญหา hoisting และการรั่วไหลของตัวแปรในลูปหรือเงื่อนไข

Question 2

JSX ใน React คืออะไร?

Accepted Answer

JSX เป็นส่วนขยายไวยากรณ์ของ JavaScript ที่ช่วยให้สามารถเขียน markup คล้าย HTML ได้โดยตรงในโค้ด JavaScript โดยจะถูกแปลงเป็นการเรียกฟังก์ชัน React.createElement โดย Babel ในระหว่างการคอมไพล์ การใช้ JSX ทำให้โค้ดอ่านง่ายขึ้นและสามารถตรวจจับข้อผิดพลาดได้ในเวลาคอมไพล์ผ่าน typing พร้อมทั้งรวมพลังของ JavaScript เข้ากับไวยากรณ์ที่คุ้นเคย

Question 3

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

Accepted Answer

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

Question 4

Mounting ใน React component คืออะไร?

Accepted Answer

Mounting คือระยะที่ component ถูกสร้างขึ้นและแทรกเข้าไปใน DOM เป็นครั้งแรก ในระยะนี้ React จะเริ่มต้น state รันโค้ดการสร้าง และทำการ render ครั้งแรก นี่คือช่วงเวลาที่เหมาะสมในการเรียก API หรือเริ่มต้น subscription ผ่าน useEffect

Question 5

CSS Module ใน React คืออะไร?

Accepted Answer

CSS Modules สร้างชื่อคลาสที่ไม่ซ้ำกันโดยอัตโนมัติด้วยการเพิ่ม hash ลงในชื่อคลาส ซึ่งช่วยป้องกันความขัดแย้งของสไตล์ระหว่างคอมโพเนนต์ แต่ละไฟล์ CSS Module มี scope ท้องถิ่นของตัวเอง ต่างจาก stylesheet แบบ global ดั้งเดิม วิธีนี้ช่วยให้เขียนสไตล์แบบ modular ได้โดยไม่มีความเสี่ยงที่จะถูกเขียนทับโดยไม่ตั้งใจในคอมโพเนนต์อื่น

Question 6

App Router ใน Next.js คืออะไร?

Accepted Answer

App Router คือระบบ routing ใหม่ใน Next.js 13+ ที่อิงตามไดเร็กทอรี app/ ซึ่งแทนที่ Pages Router และแนะนำ Server Components เป็นค่าเริ่มต้น, shared layouts และรูปแบบ routing ที่ยืดหยุ่นมากขึ้นพร้อมกับ file conventions เช่น page.tsx, layout.tsx และ loading.tsx

Question 7

ไวยากรณ์ที่ถูกต้องสำหรับการกำหนดประเภท props ของ React component คืออะไร?

Accepted Answer

Interface Props ตามด้วยการกำหนดประเภทฟังก์ชันด้วย Props เป็นพารามิเตอร์เป็นไวยากรณ์มาตรฐานที่แนะนำ วิธีนี้ให้การอนุมานประเภทที่ยอดเยี่ยมและช่วยให้นำ Props type กลับมาใช้ซ้ำได้ง่ายในที่อื่นๆ ของ code มันชัดเจนกว่า React.FC และช่วยให้ควบคุมการกำหนดประเภท children ได้ดียิ่งขึ้น

Question 8

บทบาทหลักของ React.memo คืออะไร?

Accepted Answer

React.memo เป็น Higher-Order Component ที่ทำการ memoize ผลลัพธ์การ render ของ component มันทำการเปรียบเทียบแบบตื้นของ props และข้ามการ re-render หาก props ไม่เปลี่ยนแปลง มีประโยชน์อย่างยิ่งสำหรับการเพิ่มประสิทธิภาพ child component ที่มีต้นทุนสูงซึ่งได้รับ props เดิมบ่อยครั้ง

Question 9

Error Boundary ใน React คืออะไร?

Accepted Answer

Error Boundary เป็น class component ของ React ที่จับข้อผิดพลาด JavaScript ที่เกิดขึ้นในแผนผังคอมโพเนนต์ลูก แสดง fallback UI และป้องกันไม่ให้แอปพลิเคชันทั้งหมดล่ม โดยใช้เมธอด componentDidCatch() และ getDerivedStateFromError() เพื่อดักจับและจัดการข้อผิดพลาดในการ render

Question 10

รูปแบบ Compound Components คืออะไร?

Accepted Answer

รูปแบบ Compound Components ช่วยให้สร้างคอมโพเนนต์ที่แชร์ state โดยปริยายผ่าน React Context โดยไม่ต้องส่ง props อย่างชัดเจน รูปแบบนี้ใช้ในไลบรารีอย่าง Radix UI และ Headless UI เพื่อให้ API ที่ยืดหยุ่นและประกอบกันได้ คอมโพเนนต์ลูกสามารถเข้าถึง state ที่แชร์โดยอัตโนมัติ ทำให้ปรับแต่งโครงสร้างได้โดยไม่สูญเสีย logic ร่วมกัน

คำถามสัมภาษณ์ React / Next.js

พร้อมสำหรับการสัมภาษณ์ React / Next.js แล้วหรือยังครับ?

สำรวจหัวข้อ 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

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 สำหรับการสัมภาษณ์ครั้งถัดไป