Web Development

React hook: useCallback แบบสั้นๆ

29 กรกฎาคม 20231 นาที
0
React hook: useCallback แบบสั้นๆ
Table of Contents

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

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

React Logo
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 เปลี่ยนแปลง

Tags:React

คลิกเพื่อแสดงความคิดเห็น