
Advanced React Patterns
Compound Components, Render Props, HOC, Custom Hooks patterns, Controlled/Uncontrolled, Provider, State Reducer, Props Getters
1รูปแบบ Compound Components คืออะไร?
รูปแบบ Compound Components คืออะไร?
คำตอบ
รูปแบบ Compound Components ช่วยให้สร้างคอมโพเนนต์ที่แชร์ state โดยปริยายผ่าน React Context โดยไม่ต้องส่ง props อย่างชัดเจน รูปแบบนี้ใช้ในไลบรารีอย่าง Radix UI และ Headless UI เพื่อให้ API ที่ยืดหยุ่นและประกอบกันได้ คอมโพเนนต์ลูกสามารถเข้าถึง state ที่แชร์โดยอัตโนมัติ ทำให้ปรับแต่งโครงสร้างได้โดยไม่สูญเสีย logic ร่วมกัน
2หลักการของรูปแบบ Render Props คืออะไร?
หลักการของรูปแบบ Render Props คืออะไร?
คำตอบ
รูปแบบ Render Props คือการส่งฟังก์ชันที่คืนค่าเป็น React element เป็น prop ทำให้ component แม่สามารถแชร์ logic กับ component ลูกได้ ฟังก์ชันนี้รับข้อมูลหรือ method จาก component แม่เป็น parameter รูปแบบนี้เป็นที่นิยมมากก่อนที่ hooks จะมา โดยเฉพาะกับไลบรารีอย่าง React Router และ Downshift
3Higher-Order Components (HOC) คืออะไร?
Higher-Order Components (HOC) คืออะไร?
คำตอบ
Higher-Order Components คือฟังก์ชันที่รับ component เป็น parameter และคืนค่า component ใหม่ที่เพิ่มความสามารถด้วย props หรือพฤติกรรมเพิ่มเติม รูปแบบนี้ช่วยให้นำ logic กลับมาใช้ซ้ำระหว่าง component ได้โดยไม่ต้องซ้ำโค้ด HOC ใช้สำหรับความต้องการข้ามสาย เช่น การพิสูจน์ตัวตน การติดตาม หรือการจัดการสิทธิ์
ความแตกต่างระหว่าง controlled component และ uncontrolled component คืออะไร?
รูปแบบ Provider คืออะไร?
+17 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ 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 & การจัดการข้อผิดพลาด
ฟีเจอร์ขั้นสูงของ Next.js
การ Deploy & Production ของ Next.js
Architecture & Design Patterns
React Server Components
การแปลภาษา Next.js
React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด
เชี่ยวชาญ React / Next.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี