useMemo ใช้สำหรับคำนวณค่าที่จะเก็บไว้ในตัวแปร และจะคำนวณค่าใหม่เมื่อค่าที่ใช้ในการคำนวณมีการเปลี่ยนแปลง
ตัวอย่างการใช้ useMemo ในการคำนวณค่าที่จะเก็บไว้ในตัวแปร
import React, { useState, useMemo } from "react";
function ExpensiveCalculation({ a, b }) {
const result = useMemo(() => {
console.log("Calculating...");
return a * b;
}, [a, b]);
return <p>Result: {result}</p>;
}
จากตัวอย่างนี้ เรากำหนด component ชื่อ ExpensiveCalculation ที่รับ props 2 ตัวคือ a และ b เราใช้ useMemo hook เพื่อคำนวณค่าที่จะเก็บไว้ในตัวแปร โดยจะคำนวณค่าใหม่เมื่อ a หรือ b มีการเปลี่ยนแปลง