useCallback ช่วยให้เราสามารถ memoize function ได้ ซึ่งจะถูกสร้างขึ้นใหม่เมื่อมีการเปลี่ยนแปลง dependencies ของมัน ซึ่งสามารถช่วยให้เราประหยัดเวลาในการ re-render ได้

นี่คือตัวอย่างการใช้ useCallback ในการ memoize function

import React, { useState, useCallback } from "react";
 
function SearchBar({ onSearch }) {
  const [query, setQuery] = useState("");
 
  const handleQueryChange = useCallback(
    (event) => {
      setQuery(event.target.value);
      onSearch(event.target.value);
    },
    [onSearch]
  );
 
  return <input type="text" value={query} onChange={handleQueryChange} />;
}

ในตัวอย่างนี้ เรากำหนด component ชื่อ SearchBar ที่รับ function ชื่อ onSearch เราใช้ useCallback hook เพื่อ memoize function handleQueryChange ซึ่งจะถูกสร้างขึ้นใหม่เมื่อ onSearch function เปลี่ยนแปลง