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

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 มีการเปลี่ยนแปลง