useMemo in React

Day 36/100 #100DaysOfCode #React #ReactNative

Trong React Memo và useMemo tương đối giống nhau. Nhưng nó có điểm khác biệt như sau:
+ React.memo nó dùng để tránh việc re-render lại Dom, nếu giá trị props đến thay đổi nó mới re-render lại còn không thì thôi! memo(function component or class component)
+ useMemo(function,Array) còn ở useMemo tránh cho việc tính toán lại một function lặp đi , lặp lại , nhiều lần mỗi lần component re-render, nói cho dễ hiểu nó lưu giá trị lần đầu vào bộ nhớ, lần sao tính toán, nó kiểm tra trong bộ nhớ có giống vậy thì nó lấy ra sử dụng, không cần tính toán lại và đồng thời lưu giá trị mới vào bộ nhớ tiếp cho mỗi lần re-render

useMemo(()=>{
	
	/*function : xử lý sự kiện tại đây */


   /* [] array : chỉ update , khi các giá trị trong mảng thay đổi*/
},[])

Tạo project : npx create-react-app basicreact
Ở đây mình đã làm một ví dụ đơn giản như sau, mình có một source như dưới đây, trước tiên là không sử dụng useMemo(), để xem console.log báo gì

import React ,{useState,useMemo} from 'react'

const DATA = [
    {
        "id":1,
        "name":"Book Laravel 8",
        "price":300
    },
    {
        "id":2,
        "name":"Book React Native",
        "price":400
    }
]
const UserMemo=()=>{
  const [count,setCount] = useState(0)

  const [products,setProducts] = useState(DATA);

  const check = (products)=>{
    console.log("Count Product");
    return products.length;
  };

  const addProduct = (product)=>setProducts([...products,product]);


  const product_count = check(products);

  return (
    <>
        <h1>Using useMemo in React</h1>
        <h3>Count: {count}</h3>
        <button onClick={()=>setCount(count+1)}>CLICK</button>

        <button onClick={()=>addProduct({"id":3,"name":"React","price":200})}>Add Product</button>

        <h1>Count Product : {product_count}</h1> 
    </>
  )
}

export default UserMemo

+ Nhưng khi chạy project lên , mỗi lần click button setCount(count+1) là cái function check(product) nó lại chạy nửa. Xem console thì thấy nó console.log("Count Product") nhiều lần

+ Mặc dù giữa việc setCount và function check(product) nó riêng biệt.

Bạn có thể thấy hình dưới đây : 

Để khác phục được việc nó chạy lại function cho mỗi lần component re-render thì ta dùng sự trợ giúp từ useMemo(function,Array), ta chỉnh sửa lại chút tại đây:

const product_count = useMemo(()=>{
    return check(products)
  },[products]);

Giờ ta nói rằng nếu products thay đổi thì useMemo() nó sẽ tính toán lại, bạn thử bấm vào button addProduct , nó sẽ thêm một object product  đến products, chính vì thế mà useMemo nó chạy lại bởi vì dữ liệu products đã thay đổi rồi

const [products,setProducts] = useState(DATA); 
const addProduct = (product)=>setProducts([...products,product]);
<button onClick={()=>addProduct({"id":3,"name":"React","price":200})}>Add Product</button>