useCallback — แนวคิดหลัก ฮุกการจดจำฟังก์ชันใน React

useCallback ใน React คืออะไร

useCallback คือฮุกที่ถูกเพิ่มใน React 16.8 ซึ่งจดจำฟังก์ชัน: ส่งคืนการอ้างอิงเดียวกันจนกว่าค่าที่ขึ้นต่อจะเปลี่ยนแปลง หากไม่มี useCallback ทุกการประกาศฟังก์ชันภายในคอมโพเนนต์จะสร้างออบเจกต์ฟังก์ชันใหม่ทุกครั้งที่เรนเดอร์ สำหรับค่าพื้นฐานแล้วสิ่งนี้ไม่สังเกตเห็น แต่เมื่อส่ง callback เหล่านี้ไปยังคอมโพเนนต์ลูกที่ถูกปรับแต่งด้วย React.memo ทุกการอ้างอิงใหม่จะทำให้เกิดการเรนเดอร์ซ้ำของคอมโพเนนต์ลูก

ในเชิงวากยสัมพันธ์ useCallback เทียบเท่ากับ useMemo สำหรับฟังก์ชัน: useCallback(fn, deps) เป็นตัวย่อของ useMemo(() => fn, deps) React จะเก็บฟังก์ชันที่ถูกจดจำไว้ในพื้นที่จัดเก็บภายในของโหนด fiber และเปรียบเทียบค่าที่ขึ้นต่อทุกครั้งที่เรนเดอร์ หากค่าที่ขึ้นต่อไม่เปลี่ยนแปลง (Object.is สำหรับแต่ละรายการ) ฟังก์ชันก่อนหน้าจะถูกส่งคืน

ตาม React Documentation — useCallback (2025) คุณไม่ควรครอบทุกฟังก์ชันด้วย useCallback ฮุกมีต้นทุนของมัน: การเรียกฮุก การเปรียบเทียบค่าที่ขึ้นต่อ และการจัดสรรหน่วยความจำสำหรับอาร์เรย์ของค่าที่ขึ้นต่อ หากคอมโพเนนต์เรียบง่ายและไม่มีโครงสร้างต้นไม้ลึกกับ React.memo useCallback จะทำให้แอปพลิเคชันช้าลงเท่านั้น การปรับแต่งควร วัดผลได้ ไม่ใช่โดยสัญชาตญาณ

import { useCallback } from 'react';

function Parent() {
    const [count, setCount] = useState(0);

    // การอ้างอิงที่เสถียร — ฟังก์ชันเดียวกันจนกว่า deps จะเปลี่ยน
    const handleClick = useCallback(() => {
        setCount(prev => prev + 1);
    }, []);

    return <Child onClick={handleClick} />;
}

การจดจำฟังก์ชันทำงานอย่างไร

การจดจำใน useCallback ขึ้นอยู่กับการแคชผลลัพธ์ของการเรียกฟังก์ชัน React จะเก็บ closure ที่ถูกสร้างขึ้นในขณะที่เรนเดอร์ครั้งแรกและส่งคืนในการเรนเดอร์ครั้งต่อๆ ไปตราบใดที่ค่าที่ขึ้นต่อยังคงไม่เปลี่ยนแปลง ภายในโหนด fiber ทุกการเรียก useCallback จะสร้างโหนดในรายการเชื่อมโยงของฮุก ซึ่งเก็บค่าที่ขึ้นต่อก่อนหน้าและค่าที่ถูกจดจำ

การเปรียบเทียบค่าที่ขึ้นต่อจะดำเนินการอย่างเคร่งครัดผ่าน Object.is — การเปรียบเทียบระดับพื้นผิวโดยไม่ตรวจสอบออบเจกต์หรืออาร์เรย์แบบลึก หากค่าที่ขึ้นต่อเป็นออบเจกต์หรืออาร์เรย์ การอ้างอิงใหม่ทุกครั้งที่เรนเดอร์จะถือว่าเป็นการเปลี่ยนแปลง ดังนั้น อาร์เรย์ของค่าที่ขึ้นต่อควรประกอบด้วยค่าพื้นฐานหรือการอ้างอิงที่เสถียร (เช่น จาก useRef หรือ useMemo)

ตาม React Core Team — Optimization Guide (2024) ต้นทุนของการจดจำประกอบด้วยสามส่วน: การจัดสรรอาร์เรย์ของค่าที่ขึ้นต่อในทุกการเรนเดอร์ การวนซ้ำและเปรียบเทียบองค์ประกอบผ่าน Object.is และค่าใช้จ่ายในการเก็บขยะที่อาจเกิดขึ้นเมื่อสร้างใหม่ สำหรับคอมโพเนนต์ที่มี useCallback หลายร้อยตัว สิ่งนี้อาจเห็นได้ชัด — ดังนั้น การเลือกใช้ ฮุกอย่างมีวิจารณญาณจึงสำคัญ

useCallback และประสิทธิภาพ

มีความเชื่อผิดๆ อย่างแพร่หลายว่า useCallback ช่วยปรับปรุงประสิทธิภาพโดยอัตโนมัติ ในความเป็นจริง ตามลำพัง (ไม่มี React.memo) useCallback กลับทำให้แอปพลิเคชันช้าลงเล็กน้อยเนื่องจากต้นทุนการเปรียบเทียบค่าที่ขึ้นต่อ ฮุกจะให้ประโยชน์จริงๆ ในสามสถานการณ์เท่านั้น: ป้องกันการเรนเดอร์ซ้ำของคอมโพเนนต์ React.memo, ทำให้ callback ใน useEffect เสถียร และส่ง callback ไปยังฮุกแบบกำหนดเองที่ขึ้นอยู่กับความเท่ากันของการอ้างอิง

กฎง่ายๆ คือ: จนกว่าคุณจะตรวจพบปัญหาด้านประสิทธิภาพผ่าน React DevTools Profiler — อย่าใช้ useCallback ทีม React ย้ำหลายครั้งว่าการปรับแต่งก่อนเวลาอันควรเป็นต้นเหตุของปัญหาทั้งปวง ขั้นแรกเขียนโค้ดที่สะอาดโดยไม่มีการจดจำ วัดผล ค้นหาจุดคอขวดในโปรไฟเลอร์ แล้วค่อยเพิ่ม useCallback ในที่ที่ จำเป็นจริงๆ

// การปรับแต่งที่วัดผลได้: Child ถูกครอบด้วย React.memo
const Child = React.memo(({ onClick }) => {
    console.log('Child เรนเดอร์ซ้ำแล้ว');
    return <button onClick={onClick}>Click</button>;
});

function Parent() {
    const handleClick = useCallback(() => {
        console.log('ถูกคลิก');
    }, []);
    return <Child onClick={handleClick} />;
}

ตาม Dan Abramov — Before You memo() (2024) กว่า 90% ของการใช้ useCallback ในโปรเจกต์โอเพนซอร์สนั้นซ้ำซ้อน นักพัฒนาครอบทุกฟังก์ชัน "เผื่อไว้" โดยไม่วัดผล ทางเลือก: หากคอมโพเนนต์ลูกหนักและการเรนเดอร์ซ้ำมีต้นทุนสูง — React.memo + useCallback ก็สมเหตุสมผล หากคอมโพเนนต์ลูกเบา — การเรนเดอร์ซ้ำถูกกว่าการเปรียบเทียบค่าที่ขึ้นต่อ

เมื่อใดควรใช้ useCallback

สถานการณ์แรกคือ React.memo หากคอมโพเนนต์ลูกถูกครอบด้วย React.memo และรับฟังก์ชัน callback เป็น prop หากไม่มี useCallback คอมโพเนนต์ลูกจะเรนเดอร์ซ้ำทุกครั้งที่พ่อแม่เรนเดอร์ แม้ว่าข้อมูลของมันจะไม่เปลี่ยนแปลง useCallback ทำให้การอ้างอิงเสถียร และ React.memo สามารถข้ามการเรนเดอร์ซ้ำได้อย่างถูกต้อง

สถานการณ์ที่สองคือ useEffect ที่มี callback ในค่าที่ขึ้นต่อ หากฟังก์ชันถูกส่งไปยังอาร์เรย์ของค่าที่ขึ้นต่อของ useEffect ทุกการอ้างอิงใหม่จะเริ่มต้นเอฟเฟกต์ใหม่ useCallback รับประกันว่าการอ้างอิงเสถียร และเอฟเฟกต์จะทำงานเมื่อข้อมูลจริงเปลี่ยนแปลงเท่านั้น ไม่ใช่ทุกครั้งที่เรนเดอร์ สิ่งนี้สำคัญโดยเฉพาะสำหรับการสมัครรับข้อมูลและคำขอ

• ลูก React.memo — ป้องกันการเรนเดอร์ซ้ำของคอมโพเนนต์ลูกที่ถูกจดจำเมื่อส่ง callback
• ค่าที่ขึ้นต่อของ useEffect — ทำให้ฟังก์ชันในอาร์เรย์ของค่าที่ขึ้นต่อของเอฟเฟกต์เสถียร ป้องกันการเริ่มต้นใหม่ที่ไม่จำเป็น
• ฮุกแบบกำหนดเอง — หากฮุกรับ callback และขึ้นอยู่กับความเท่ากันของการอ้างอิง useCallback เป็นสิ่งจำเป็น
• ค่าคอนเท็กซ์ — หากฟังก์ชันถูกส่งในค่าคอนเท็กซ์ useCallback จะทำให้การอ้างอิงเสถียร

// useCallback สำหรับค่าที่ขึ้นต่อของ useEffect ที่เสถียร
const fetchData = useCallback(async (id) => {
    const res = await fetch(`/api/${id}`);
    setData(res.data);
}, []); // การอ้างอิงที่เสถียร ไม่ถูกสร้างใหม่เลย

useEffect(() => {
    fetchData(props.id);
}, [props.id, fetchData]); // เอฟเฟกต์ทำงานเมื่อ props.id เปลี่ยนแปลงเท่านั้น

useCallback กับ useMemo

ความแตกต่างหลักระหว่าง useCallback และ useMemo คือสิ่งที่แต่ละตัวจดจำ useCallback จดจำฟังก์ชัน: useCallback(fn, deps) ส่งคืน fn (เวอร์ชันเดียวกันหรือก่อนหน้า) useMemo จดจำผลลัพธ์ของการเรียกฟังก์ชัน: useMemo(() => computeExpensive(a, b), [a, b]) ส่งคืนค่าที่คำนวณแล้ว ไม่ใช่ฟังก์ชัน

ในทางเทคนิค useCallback คือนํ้าตาลเชิงวากยสัมพันธ์เหนือ useMemo: useCallback(fn, deps) เทียบเท่ากับ useMemo(() => fn, deps) วากยสัมพันธ์นี้มีไว้เพื่อความสามารถในการอ่านเท่านั้น — เพื่อให้นักพัฒนาเห็นชัดเจนว่ากำลังจดจำฟังก์ชัน ไม่ใช่ค่า ไม่มีความแตกต่างด้านประสิทธิภาพระหว่าง useCallback และ useMemo กับฟังก์ชัน — ทั้งคู่สร้างโค้ดที่เหมือนกัน

// สิ่งเหล่านี้เทียบเท่ากัน:
const handleClick = useCallback(() => doSomething(a, b), [a, b]);
const handleClick = useMemo(() => () => doSomething(a, b), [a, b]);

ข้อผิดพลาดทั่วไปกับ useCallback

ข้อผิดพลาดที่พบบ่อยที่สุดคือ การครอบอย่างไม่มีประโยชน์ ทุกฟังก์ชันใน useCallback โดยไม่มี React.memo บนคอมโพเนนต์ลูก หากคอมโพเนนต์ลูกไม่ได้ถูกครอบด้วย React.memo มันก็ยังคงเรนเดอร์ซ้ำทุกครั้งที่พ่อแม่เรนเดอร์ ไม่ว่าการอ้างอิง callback จะเปลี่ยนหรือไม่ก็ตาม useCallback โดยไม่มี React.memo คือต้นทุนที่ไม่มีประโยชน์

• useCallback โดยไม่มี React.memo — คอมโพเนนต์ลูกยังคงเรนเดอร์ซ้ำ; การปรับแต่งไม่มีประโยชน์
• ค่าที่ขึ้นต่อที่ถูกลืม — หากตัวแปรที่ใช้ภายใน callback ไม่ได้อยู่ใน deps callback จะมี stale closure
• การจดจำมากเกินไป — ครอบทุกฟังก์ชัน รวมถึง onClick ธรรมดากับ console.log
• ออบเจกต์และอาร์เรย์ในค่าที่ขึ้นต่อ — การอ้างอิงใหม่ทุกครั้งที่เรนเดอร์ถือว่าเป็นการเปลี่ยนแปลง การจดจำไม่มีประโยชน์

// ❌ ไร้ประโยชน์: ไม่มี React.memo บนลูก
const handle = useCallback(() => doStuff(), []);
<Child onClick={handle} />; // Child ยังคงเรนเดอร์ซ้ำโดยไม่มี React.memo

// ❌ Stale closure: ค่าที่ขึ้นต่อหายไป
const handle = useCallback(() => {
    console.log(count); // count เป็น 0 เสมอ — stale closure!
}, []);

// ✅ ถูกต้อง: รวมค่าที่ขึ้นต่อ
const handle = useCallback(() => {
    console.log(count);
}, [count]);

ปัญหา stale closure ใน useCallback สามารถแก้ไขได้โดยรวมตัวแปรที่ใช้ทั้งหมดไว้ในอาร์เรย์ของค่าที่ขึ้นต่อ eslint-plugin-react-hooks พร้อม exhaustive-deps จะตรวจสอบโดยอัตโนมัติว่าตัวแปรทั้งหมดจากเนื้อหาของ callback อยู่ในอาร์เรย์ หาก callback ใช้ setState ซึ่งไม่เปลี่ยนแปลงระหว่างการเรนเดอร์ ก็สามารถรวมไว้ใน deps ได้อย่างปลอดภัย — React รับประกันความเสถียรของ setState