React Performance Optimization: เข้าใจ useMemo และ useCallback

ในแอปพลิเคชัน React ที่มีขนาดใหญ่ ปัญหาด้านประสิทธิภาพมักเกิดขึ้นเมื่อคอมโพเนนต์มีการ Re-render บ่อยครั้งโดยไม่จำเป็น โชคดีที่ React มี Hooks สองตัวที่ช่วยในการ 'จดจำ' (Memoization) เพื่อลดภาระการประมวลผล นั่นคือ useMemo และ useCallback

หลักการทำงาน: Memoization คืออะไร?

Memoization คือเทคนิคการเพิ่มประสิทธิภาพที่ใช้ในการแคชผลลัพธ์ของการเรียกใช้ฟังก์ชันที่มีค่าใช้จ่ายสูง (Expensive Function Call) และส่งคืนผลลัพธ์ที่ถูกแคชไว้เมื่อมีการเรียกใช้ด้วย Input (Dependency) เดิม

ในโลกของ React, useMemo และ useCallback ทำหน้าที่คล้ายกัน แต่มีเป้าหมายต่างกัน คือ ค่า (Value) และ ฟังก์ชัน (Function)

1. useMemo: จดจำค่า (Memoizing Values)

useMemo ใช้สำหรับ จดจำผลลัพธ์ของฟังก์ชัน (ค่า) เพื่อป้องกันการคำนวณซ้ำเมื่อคอมโพเนนต์ Re-render ตราบใดที่ Dependencies ยังไม่เปลี่ยนแปลง

Syntax