# การเพิ่มประสิทธิภาพ (React Native)

> การเพิ่มประสิทธิภาพ FlatList, memo, useMemo/useCallback, Hermes, การทำ profiling, ขนาด bundle

- 24 คำถามสัมภาษณ์
- Senior
- [คำถามสัมภาษณ์: React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions.md)

## 1. บทบาทหลักของ React.memo ในการเพิ่มประสิทธิภาพของ React Native คืออะไร?

**คำตอบ**

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

## 2. พร็อพเพอร์ตี้ใดของ FlatList ที่ช่วยเพิ่มประสิทธิภาพการเลื่อนอย่างมากด้วยการระบุขนาดของไอเทมล่วงหน้า?

**คำตอบ**

getItemLayout เป็นพร็อพเพอร์ตี้เสริมของ FlatList ที่ช่วยให้คำนวณความสูง ความกว้าง และ offset ของแต่ละองค์ประกอบไว้ล่วงหน้า ซึ่งช่วยให้ React Native ไม่ต้องวัดขนาดของแต่ละไอเทมแบบไดนามิก ทำให้ประสิทธิภาพการเลื่อนดีขึ้นอย่างมาก โดยเฉพาะเมื่อกระโดดไปยังดัชนีที่ระบุด้วย scrollToIndex การเพิ่มประสิทธิภาพนี้มีประโยชน์อย่างยิ่งเมื่อไอเทมทั้งหมดมีขนาดเท่ากัน

## 3. ความแตกต่างหลักระหว่าง useMemo และ useCallback ในแง่ของการเพิ่มประสิทธิภาพคืออะไร?

**คำตอบ**

useMemo จะ memoize ผลลัพธ์ของการคำนวณที่มีต้นทุนสูงและคืนค่าที่คำนวณได้นั้น ในขณะที่ useCallback จะ memoize ตัวฟังก์ชันเองและคืนฟังก์ชันนั้น useMemo มีประโยชน์ในการหลีกเลี่ยงการคำนวณซ้ำที่หนักในทุก ๆ การ render ส่วน useCallback จำเป็นอย่างยิ่งในการหลีกเลี่ยงการสร้างฟังก์ชันใหม่ที่ส่งเป็น props ไปยัง component ลูกที่ memoize ไว้ ซึ่งจะทำให้การเพิ่มประสิทธิภาพ React.memo ของ component เหล่านั้นเสียไป

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

- Hermes คืออะไรและข้อได้เปรียบหลักของมันสำหรับแอปพลิเคชัน React Native คืออะไร?
- เหตุใดการระบุฟังก์ชัน keyExtractor ที่เสถียรให้กับ FlatList จึงมีความสำคัญอย่างยิ่ง?

สมัครฟรี: https://sharpskill.dev/th/login

## หัวข้อสัมภาษณ์ React Native อื่นๆ

- [พื้นฐาน JavaScript](https://sharpskill.dev/th/technologies/react-native/interview-questions/javascript-essentials.md): 25 คำถาม, Junior
- [พื้นฐาน React](https://sharpskill.dev/th/technologies/react-native/interview-questions/react-fundamentals.md): 20 คำถาม, Junior
- [พื้นฐาน React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/react-native-basics.md): 22 คำถาม, Junior
- [React Hooks](https://sharpskill.dev/th/technologies/react-native/interview-questions/react-hooks.md): 20 คำถาม, Junior
- [TypeScript สำหรับ React และ React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/typescript-for-react-native.md): 22 คำถาม, Junior
- [คอมโพเนนต์และ API ของ React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-components-api.md): 20 คำถาม, Junior
- [การจัดสไตล์และเลย์เอาต์ใน React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-styling-layout.md): 18 คำถาม, Junior
- [การนำทางใน React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-navigation.md): 22 คำถาม, Mid-Level
- [การจัดการ State ใน React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-state-management.md): 24 คำถาม, Mid-Level
- [Networking และ API ใน React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-networking-api.md): 20 คำถาม, Mid-Level
- [การคงอยู่ของข้อมูล](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-data-persistence.md): 20 คำถาม, Mid-Level
- [ฟอร์มและการตรวจสอบความถูกต้อง](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-forms-validation.md): 18 คำถาม, Mid-Level
- [แอนิเมชัน React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-animations.md): 22 คำถาม, Mid-Level
- [Native Modules & Bridge](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-native-modules.md): 20 คำถาม, Mid-Level
- [โค้ดเฉพาะแพลตฟอร์ม](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-platform-specific-code.md): 18 คำถาม, Mid-Level
- [สิทธิ์และ Device API](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-permissions-apis.md): 20 คำถาม, Mid-Level
- [Push Notifications](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-push-notifications.md): 18 คำถาม, Mid-Level
- [การทดสอบ React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-testing.md): 20 คำถาม, Mid-Level
- [การ Debug React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-debugging.md): 18 คำถาม, Mid-Level
- [Build & Deployment](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-build-deployment.md): 20 คำถาม, Mid-Level
- [Expo vs React Native Bare](https://sharpskill.dev/th/technologies/react-native/interview-questions/expo-vs-bare-rn.md): 18 คำถาม, Mid-Level
- [การจัดการหน่วยความจำ](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-memory-management.md): 20 คำถาม, Senior
- [Architecture Patterns](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-architecture-patterns.md): 22 คำถาม, Senior
- [React Native New Architecture](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-new-architecture.md): 24 คำถาม, Senior
- [แนวทางปฏิบัติที่ดีที่สุดด้านความปลอดภัย](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-security-best-practices.md): 20 คำถาม, Senior
- [Offline-First Architecture](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-offline-first.md): 20 คำถาม, Senior
- [CI/CD React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-ci-cd.md): 20 คำถาม, Senior
- [Monorepo และการแชร์โค้ด](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-monorepo-architecture.md): 18 คำถาม, Senior
- [หัวข้อขั้นสูง](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-advanced-topics.md): 22 คำถาม, Senior
- [วงจรชีวิตแอปและการทำงานเบื้องหลัง](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-app-lifecycle-background.md): 20 คำถาม, Mid-Level
- [การยืนยันตัวตนและการจัดการเซสชัน](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-auth-session-management.md): 22 คำถาม, Mid-Level
- [Monitoring & Crash Reporting](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-monitoring-crash-reporting.md): 20 คำถาม, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-performance-optimization