React : useMemo ดีอย่างไร

บล็อกนี้จะเป็นเรื่องสั้นๆ ของ useMemo ซึ่งเป็นอีกหนึ่งฟังก์ชัน Hook ของ React ซึ่งเราจะเรียกใช้งาน useMemo นี้ได้ภายใน React Component เท่านั้น และวิธีการใช้งานเพื่อ ไม่ให้เกิดการกำหนดค่าหรือการเรียกใช้งานซ้ำซ้อน หากมีการ rerender ตัว component นั้นในรอบใหม่ ถือว่าเป็นการใช้งานเพื่อเพิ่มประสิทธิภาพของโปรแกรมได้เลยทีเดียว

รูปแบบของ useMemo

const list = useMemo(() => {
    return ["item-1", "item-2", "item-3", "item-1", "item-2", "item-3"];
}, []);

จากรูปแบบของ useMemo จะมีพารามิเตอร์ 2 ตัว คือ

1. call back function เราสามารถเขียนการ return ค่า หรือ เรียกใช้ฟังก์ชันได้ใน call back function นี้ได้เลย

2. dependency การกำหนดให้ฟังก์ชัน useMemo นี้จะเรียกซ้ำอีกครั้งเมื่อ state ใน dependency มีการเปลี่ยนแปลง แต่ถ้าไม่ใส่อะไรเข้าไปเลย จะหมายถึงว่าให้ทำแค่ครั้งเดียว

ตัวอย่าง Component ที่ใช้ useMemo และ ไม่ใช้ useMemo

จากที่อธิบายภาพรวมของ useMemo ไว้ข้างต้นแล้ว ต่อไปจะอธิบายแบบละเอียดด้วยการยกตัวอย่างโค้ดโปรแกรมที่คล้ายๆ กัน 2 แบบ แบบแรกจะไม่ใช้ useMemo และแบบที่สองจะใช้ useMemo

ซึ่งโค้ดตัวอย่างจะเขียนใน Compnent App โดยที่จะกำหนด

1. a และ b เป็น state ของ App
2. และมี input ที่แสดงค่า a และ b อย่างละ input เมื่อใส่ค่าใน input a หรือ b ค่าของ a หรือ b ก็จะเปลี่ยนแปลงด้วย
3. และมี ผลลัพธ์ของการบวก a+a อยู่ด้านล่างสุด (เราจะไม่เอา b มาคำนวนด้วย เนื่องจาก เราจะทดลองเปลี่ยนค่า b แล้วดูผลลัพธ์ที่เกิดขึ้น)

ตัวอย่าง การคำนวนการบวก ค่า a+a ของทั้งสองตัวอย่างจะมีการเรียกใช้ฟังก์ชันที่แตกต่างกัน คือ

• ตัวอย่างแรก จะคำนวนด้วยฟังก์ชันที่ไม่ใช้ useMemo (มีแค่ฟังก์ชัน plus)
• ตัวอย่างที่สอง จะเพิ่มตัวแปรที่ใช้ useMemo มาเรียกฟังก์ชันคำนวนของตัวอย่างแรก (มีฟังก์ชัน plus และ doubleX2 ที่เป็น useMemo)

เพื่อจะให้เห็นความแตกต่างของผลการเรียกและ render ค่าในฟังก์ชัน plus (เป็นฟังก์ชันคำนวนการบวกเลข 2 จำนวน) เราจะทำการปริ้นค่า b ซึ่งเป็น state ของ App ออกมาทาง console.log

โค้ดตัวอย่างที่ 1 (เปิด console log ใน code sanbox ดูด้วย)

จากตัวอย่างที่ 1 จะพบว่า ถ้าเราเปลี่ยนค่า a ไปเรื่อยๆ ผลลัพธ์บรรทัดด้านล่าง จะเปลี่ยนตาม และ ค่าใน console.log จะปริ้น —-0 ออกมาตลอด

และถ้าเราเพิ่มค่า b ไปเรื่อยๆ จะพบว่าผลลัพธ์บรรทัดด้านล่างจะไม่เปลี่ยน (ฟังก์ชันคำนวนด้วยค่า a+a) และค่าใน console.log จะปริ้น —-<b> ตามด้วยค่าของ b ออกมาตลอด

ซึ่งนั้นหมายความว่า ทุกครั้งที่ค่าของ state ของ App (ค่า a และ b) มีการเปลี่ยนแปลง ฟังก์ชัน plus จะถูกเรียกใช้เสมอ ไม่ว่าจะเป็นค่า b ที่เปลี่ยนซึ่งไม่เกี่ยวกับการคำนวนเลยก็ตาม

จึงทำให้เห็นว่า ฟังก์ชัน plus ควรที่จะทำงานหรือรันเฉพาะตอนที่ค่า state a เปลี่ยนเท่านั้น เราเลยนำ useMemo มาใช้ในตัวอย่างที่ 2

โค้ดตัวอย่างที่ 2 (เปิด console log ใน code sanbox ดูด้วย)

จากตัวอย่างที่ 2 ถ้าเราเปลี่ยนค่า a ไปเรื่อยๆ ผลลัพธ์จะเหมือนกันตัวอย่างที่ 1

แต่ถ้าเราเปลี่ยนค่า b จะเห็นว่า โปรแกรมจะไม่เข้าไปทำงานในฟังก์ชัน plus เลย เนื่องจาก เรากำหนดตัวแปรที่เรียกใช้ useMemo ขึ้นมาหนึ่งตัว (doubleX2) และไปเรียกใช้ฟังก์ชัน plus อีกรอบหนึ่งนั้นเอง ดังนั้นค่าของ doubleX2 จะถูกประมวลผลใหม่ก็ต่อเมื่อค่า a มีการเปลี่ยนแปลง (เรากำหนดไว้ใน dependency ของ useMemo)

สรุป

useMemo จะเป็นฟังก์ชัน hook ที่ รีเทิร์นค่ากลับ และจะทำงานในฟังก์ชัน เฉพาะในกรณีที่ state ใน dependentcy มีการเปลี่ยนแปลงเท่านั้น (ค่า state ที่กำหนดในอาเรย์ [] พารามิเตอร์ตัวที่สองของ useMemo )

เราจะใช้ useMemo เพื่อเพิ่มประสิทธิภาพในการทำงานของ Component ไม่ให้เกิดการเรียกใช้ฟังก์ชัน หรือการคำนวนอะไรที่ซ้ำเดิม ได้คำตอบเดิมๆ ทุกครั้งที่ rerender ใหม่

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

อ้างอิง

1. https://reactjs.org/docs/hooks-reference.html#usememo