คำถามสัมภาษณ์ React ที่คุณควรเตรียมรับมือ
โดย Aaron Cao · อัปเดตเมื่อ
ให้เตรียมรับมือกับคำถามเรื่อง hooks ก่อน ได้แก่ useState, dependencies ของ useEffect และ stale closures จากนั้นจะเป็นเรื่อง rendering ได้แก่ reconciliation, เหตุผลที่ keys ในลิสต์มีความสำคัญ และวิธีควบคุม re-render ด้วย memo, useMemo และ useCallback กระบวนการสัมภาษณ์ส่วนใหญ่จะมีแบบฝึกหัดสดเพิ่มเข้ามาด้วย ซึ่งมักเป็นการดึงข้อมูลมาแสดงเป็นลิสต์แล้วกรอง หรือช่องค้นหาที่มี debounce
แนวคิด React แบบไหนที่ถูกถามบ่อยที่สุด?
ขอบเขตของ React นั้นกว้างมาก และรายการคำถามมักปฏิบัติต่อทุกมุมราวกับว่ามีโอกาสถูกถามเท่ากันหมด ซึ่งไม่เป็นความจริง ส่วนนี้ครอบคลุมแนวคิดที่ตัดสินผลการสัมภาษณ์ส่วนใหญ่จริง ๆ เพื่อให้คุณฝึกฝนตามสัดส่วนที่เกิดขึ้นจริง สี่กลุ่มหลักที่ครอบงำคำถามคือ
- กลไกของ hooks กฎของ hooks สิ่งที่ควรอยู่ใน dependency array ของ useEffect, cleanup functions และบั๊ก stale closure ที่ effect หรือ callback มองเห็นค่า state เก่า
- Rendering สิ่งที่กระตุ้นให้เกิด re-render, วิธีที่ reconciliation เปรียบเทียบโครงสร้างแบบ tree และเหตุผลที่ keys ที่เสถียรมีความสำคัญในลิสต์
- การออกแบบ state การยก state ขึ้นไปไว้ที่บนสุด (lifting state), controlled เทียบกับ uncontrolled input และเวลาที่ context เหมาะสมกว่า store ภายนอก
- Performance React.memo, useMemo, useCallback และช่วงเวลาที่แต่ละตัวเป็นเพียงสัญญาณรบกวนมากกว่าการช่วยเหลือ
ผู้สัมภาษณ์จะเจาะลึกถึงเหตุผลเบื้องหลังแต่ละประเด็น การท่องจำว่า keys ต้องไม่ซ้ำกันไม่ได้คะแนนอะไรเลย แต่การอธิบายได้ว่า React ทำอะไรกับ key เมื่อมีการจัดลำดับลิสต์ใหม่ต่างหากที่ได้คะแนน
ควรเตรียมรับมือกับแบบฝึกหัด live coding แบบไหนบ้าง?
การสัมภาษณ์ React ส่วนใหญ่จะมีการสร้าง component เล็ก ๆ แบบสด แบบฝึกหัดที่เจอซ้ำ ๆ นั้นค่อนข้างคงที่ไม่ว่าจะเป็นบริษัทไหน
- ดึงลิสต์ข้อมูลจาก API มาแสดงผล แล้วเพิ่มตัวกรองข้อความ
- เพิ่ม debounce ให้ช่องค้นหาและยกเลิก request ที่ล้าสมัยไปแล้ว
- สร้างฟอร์มที่มีการตรวจสอบความถูกต้อง (validation) และ input แบบ controlled
- เขียนตัวนับหรือตัวจับเวลาที่ทำความสะอาด (cleanup) effect ของตัวเองได้อย่างถูกต้อง
- ดึง custom hook ออกมาจากโค้ดที่ทำซ้ำ ๆ กัน
ตัวอย่างเช่น วิศวกร front-end ที่สัมภาษณ์งานตำแหน่ง product ระดับกลาง อาจต้องสร้างลิสต์แบบดึงข้อมูลแล้วกรอง จากนั้นจะถูกถามต่อเรื่อง loading state, error state และสิ่งที่เกิดขึ้นเมื่อ component ถูก unmount กลางคันขณะที่ request ยังทำงานอยู่ ส่วนขยายเหล่านี้ต่างหากที่ตัดสินผลการสัมภาษณ์ ส่วนแบบฝึกหัดพื้นฐานเป็นเพียงเกณฑ์ขั้นต่ำเท่านั้น
การฝึกซ้อมสิ่งเหล่านี้ภายใต้เวลาที่จำกัดพร้อมคำถามตามต่อเนื่อง คือสิ่งที่ทำให้มันกลายเป็นความเคยชิน หน้าการสัมภาษณ์จำลองอธิบายวิธีจัดเซสชันแบบจับเวลาที่ผู้สัมภาษณ์ถามต่อไม่หยุด
คำถาม React ระดับ senior มีลักษณะอย่างไร?
การสัมภาษณ์ระดับ senior จะเปลี่ยนจุดเน้นจากกลไกไปสู่การตัดสินใจ ให้เตรียมรับมือกับคำถามเรื่องสถาปัตยกรรมของ state ได้แก่ อะไรควรอยู่ใน state ของ component อะไรควรอยู่ใน store, state ของ server ต่างจาก state ของ UI อย่างไร และ cache ควรอยู่ชั้นไหน คำถามเรื่อง performance ของ rendering จะเจาะจงมากขึ้น เช่น การหาต้นตอของ interaction ที่ทำงานช้า การเลือกระหว่าง memoization กับการปรับโครงสร้างใหม่ และการอ่าน flame graph จาก profiler
Server-side rendering และ hydration จะปรากฏขึ้นเมื่อทีมใช้ framework ที่สร้างอยู่บน React ได้แก่ hydration คืออะไร ทำไมถึงเกิดความไม่ตรงกัน (mismatch) และการย้ายงานไปทำที่ server ให้ประโยชน์อะไรบ้าง คำถามเรื่อง testing จะเน้นที่กลยุทธ์ คือสิ่งที่ควรทดสอบในระดับ component เทียบกับ end to end มากกว่าการเน้นที่ API ของไลบรารีใดไลบรารีหนึ่ง
รูปแบบการสัมภาษณ์ และวิธีที่กระบวนการ front-end มักจัดวางรอบเหล่านี้ อธิบายไว้ในหน้ารวมประเภทการสัมภาษณ์
ควรฝึกซ้อมอย่างไรให้นำไปใช้ได้จริงในการสัมภาษณ์?
การดูวิดีโอสอนสร้างได้แค่ความคุ้นเคย ไม่ใช่ความสามารถในการนึกย้อนกลับมาใช้ ในขณะที่การสัมภาษณ์ทดสอบความสามารถในการนึกย้อนกลับมาใช้ขณะถูกจับตามอง ทางแก้คือการฝึกซ้อมในรูปแบบจริงของการสัมภาษณ์ ได้แก่ สร้างแบบฝึกหัดมาตรฐานจากไฟล์เปล่า พูดอธิบายไปพร้อมกับพิมพ์โค้ด และตอบคำถามที่แทรกเข้ามาโดยไม่หลุดประเด็น ชุดคำถามสำหรับ stack ที่ใกล้เคียงกัน รวมถึงพื้นฐาน JavaScript ล้วน ๆ ที่การสัมภาษณ์ React ยังคงใช้เปิดฉากอยู่เสมอ อยู่ที่หน้ารวมคลังคำถาม
ข้อสังเกตที่ตรงไปตรงมา คือการสัมภาษณ์ React เกือบทั้งหมดจะทำในตัวแก้ไขโค้ดที่แชร์ร่วมกันหรือมีการแชร์หน้าจอ และทุกอย่างที่อยู่บนหน้าจอนั้นผู้สัมภาษณ์มองเห็นได้หมด ผู้ช่วยควรมีที่ทางในช่วงเตรียมตัวและฝึกซ้อมเท่านั้น ไม่ใช่ในการสัมภาษณ์จริงที่มีการแชร์หน้าจอ สำหรับการใช้งานสดที่ถูกต้องตามข้อกำหนด overlay ของ SubcueAI จะทำงานอยู่ในเครื่องของคุณเท่านั้นและไม่มีบอทเข้าร่วมการสนทนา วิธีตั้งค่าสำหรับเซสชันฝึกซ้อมอยู่ที่หน้าtutorial