จากครั้งที่แล้ว เราโชว์ส่วนของ useMemo ไป ทีนี้จะเป็น hook อีกอันนึงเรียกว่า useCallback วิธีใช้ก็ไม่ต่างจาก useMemo เท่าไหร่นัก เอาล่ะ เราไปดูกันเลย
ก่อนอื่นจะให้ดูหน้าตาแอปก่อน ถ้าเราพิมตัวเลขใน input ตัวเลขด้านล่างจะเป็น 3 เท่าของ input ส่วนปุ่มเอาไว้เปลี่ยนสีของ output
![](https://www.frevation.com/wp-content/uploads/2022/01/useCallback-1.png)
นี่คือหน้าตาของโค้ด
![](https://www.frevation.com/wp-content/uploads/2022/01/useCallback-2.png)
จะเห็นว่า outPutNumber เป็น function
![](https://www.frevation.com/wp-content/uploads/2022/01/useCallback-3.png)
![](https://www.frevation.com/wp-content/uploads/2022/01/useCallback-5.png)
Component Output เมื่อเราพิมตัวเลขไปก็จะ render component นี้
![](https://www.frevation.com/wp-content/uploads/2022/01/useCallback-5-1.png)
แต่พอเรากดปุ่มเปลี่ยนสี จะเห็นว่า running function ดันติดมาด้วยทั้งๆที่เป็นคนละส่วนกัน
![](https://www.frevation.com/wp-content/uploads/2022/01/useCallback-6.png)
สาเหตุเป็นเพราะ react แบบเปลี่ยน state จะทำการ re-render component ใหม่ทั้งหมด เป็นสาเหตุให้ performance ของแอปแย่ลงโดยไม่จำเป็น
ทีนี้เราเปลี่ยนมมาใช้ useCallback ดู
![](https://www.frevation.com/wp-content/uploads/2022/01/useCallback-7.png)
ทำการกดเปลี่ยนสีอีกครั้ง จะเห็นว่าไม่มี running function ขั้นกลางอีกแล้ว
![](https://www.frevation.com/wp-content/uploads/2022/01/useCallback-8.png)
หากคุณเห็นของ useMemo มาก่อนแล้วจะรู้สึกว่าไม่ต่างกันเท่าไร แต่สิ่งที่ต่างคือ useCallback จะทำตัวเป็นเหมือน function เลย ดังนั้นจะสังเกตได้ว่า outPutNumber นั้นเป็น function นั่นเอง ในส่วนของ useMemo นั้นถ้าเอามาใช้กับ outPutNumber จะกลายเป็น value เลย
![](https://www.frevation.com/wp-content/uploads/2022/01/useCallback-9.png)
ผู้เขียน Tanapat Limtemsap
วันที่ 20 มกราคม พ.ศ. 2565