Cách sử dụng useMemo()

useMemo() được build bởi React hook và chấp nhận 2 argument- một function và mảng dependencies.
const memoizedResult = useMemo(compute, dependencies);
Trong quá trình render lần đầu, useMemo(compute,dependencies) ngay lập tức gọi compute, ghi nhớ value đã return cho vào memorizes, và trả về component.
Nếu trong suốt quá trình renderings, các dependencies không thay đổi, useMemo() không gọi compute mà return memorized value.
Nhưng nếu các dependencies thay đổi trong quá trình re-rendering, useMemo() sẽ gọi compute, nó sẽ update một value mới vào memorizes, và trả về value đó.
Ví dụ useMemo()
Một component nhằm tính giai thừa của một số.

import { useState } from 'react';
export function CalculateFactorial() {
  const [number, setNumber] = useState(1);
  const [inc, setInc] = useState(0);
  const factorial = factorialOf(number);
  const onChange = event => {
    setNumber(Number(event.target.value));
  };
  const onClick = () => setInc(i => i + 1);

  return (
    <div>
      Factorial of 
      <input type="number" value={number} onChange={onChange} />
      is {factorial}
      <button onClick={onClick}>Re-render</button>
    </div>
  );
}
function factorialOf(n) {
  console.log('factorialOf(n) called!');
  return n <= 0 ? 1 : n * factorialOf(n - 1);
}

Mỗi khi bạn thay đổi giá trị input, factorialOf(n) và factorialOf(n) được gọi.
Ben cạnh đó, mỗi lần bạn nhấn re-render, set state inc sẽ được update và component <CalculateFactorial/> sẽ được re-rendering. Nhưng, trong lần render thứ 2, factorialOf(n) được gọi lại lần nữa.
Vậy làm thế nào có thể ghi nhớ factorial khi componnent re-renders?
Bằng cách sử dụng useMemo(()=>factorialOf(number),[number]) thay vì đơn giản factorialOf(number), React sẽ ghi nhớ factorial
Ví dụ

import { useState, useMemo } from 'react';
export function CalculateFactorial() {
  const [number, setNumber] = useState(1);
  const [inc, setInc] = useState(0);
  const factorial = useMemo(() => factorialOf(number), [number]);
  const onChange = event => {
    setNumber(Number(event.target.value));
  };
  const onClick = () => setInc(i => i + 1);

  return (
    <div>
      Factorial of 
      <input type="number" value={number} onChange={onChange} />
      is {factorial}
      <button onClick={onClick}>Re-render</button>
    </div>
  );
}
function factorialOf(n) {
  console.log('factorialOf(n) called!');
  return n <= 0 ? 1 : n * factorialOf(n - 1);
}

Mỗi lần ấn button Re-render, factorial(n) không được in ra màn hình console bởi vì useMemo returns memorized của factorial
Kết luận
useMemo(()=>computation(a,b),[a,b]) cho phép bạn ghi nhớ các phép tính lưu vào vùng nhớ memorize. Với các dependencies [a,b] giống nhau, hook sẽ trả về memorized value mà không cần gọi computation(a,b)

Comments

[datletrong215]

good