Memo in React

min read

Day 35/100 #100DaysOfCode #React #ReactNative

Nay mình làm một ví dụ về cái thằng memo trong React, mình nghe nói thằng memo này nó giúp ta tránh việc gọi lại component không cần thiết
Nói như thế này, VD ta có api gọi từ thằng cha(Parent Component) dữ liệu trả về , sau đó đưa dữ liệu(props) đó xuống thằng con (Child Component) đề show nó ra. Nếu mỗi lần thằng cha thay đổi cái gì là thằng con nó bị gọi lại. Dù ta không có tác động đến thằng con, nó cũng bị ảnh hưởng gọi lại. Chính vì thế ta dùng memo để tránh việc gọi lại không cần thiết, chỉ gọi lại khi dữ liệu thằng cha gọi api thay đổi, thì thằng con mới thay đổi thôi. Còn lại các vấn đề khác nếu không có liên quan đến dữ liệu, thì thằng con nó phải im lặng
Làm cách này sẽ giúp cho ta giúp hiệu suất chạy ổn.

Đầu tiên các bạn tạo project react như mọi khi thôi, sau đó thử đoạn code sau không có memo, rồi chạy bạn sẽ thấy console.log(“show product”) nó luôn show ra, khi giá trị Count thay đổi, dù Count đó không có liên quan gì đến việc gọi API

import React, { useEffect,useState,memo } from 'react'

const Product = ({products}) => {
  console.log("show product")
  return (
     <>
        <ul style={{display:'flex',flexWrap:'wrap'}}>
            {
              products.length>0 && products.map(({id,Title,Price,UrlImage})=>{
                return(
                   <>
                      <li key={id} style={{listStyle:'none',width:200,textAlign:'center',padding:20}}>
                        <img src={UrlImage} style={{height:80}} />
                        <h3 style={{fontSize:12}}>{Title.substring(0, 50) }</h3>
                        <mark>{Price}</mark>
                      </li>
                   </>
                )
              })
            }
        </ul>
     </>
  )
};

const MemoComponent=()=>{
  const [count,setCount] = useState(0);
  const [loading,setLoading]=useState(false);
  const [products,setProducts] = useState([]);
  let fetch_api = true;
  useEffect(()=>{
    setLoading(true);
    FetchAPI(`http://127.0.0.1:8000/api/products`);
    return ()=>{
        fetch_api = false;
    }
  },[]);
  const FetchAPI = async (URL)=>{
    const data = await fetch(URL);
        if(fetch_api){
                let results = data.json();
                await results.then(res=>setProducts(res.products));
                console.log("set products");
                setLoading(false);

        }
  }
  return (
    <>
        <h1>Memo in React</h1>
        {
          loading ? <h1>Loading...!</h1> : 
          <>
            <h2>Count: {count}</h2>
            <button onClick={()=>setCount(count+1)}>ADD COUNT</button>
            <Product products={products}/>
          </>
        }
    </>
  )
}



export default MemoComponent

 

Các bạn xem bên trên mình có dùng một hàm request API (FetchAPI), có dữ liệu rồi, thì props nó đến Product 

<Product products={products}/>

Tạo một state Count, để cập nhật Count khi ta bấm setCount(count+1)

<button onClick={()=>setCount(count+1)}>ADD COUNT</button>

Khi ta bấm sự kiện onClick thì thằng FetchAPI nó gọi lại,  và bên trong component Product nó sẽ console.log(“show product”) .

memo in react

Tại sao nó bị vậy, ta đâu tác động đến thằng API gì đâu, điều đó làm ta cảm thấy khó chịu, nếu dữ liệu càng lớn thì nó làm ảnh hưởng đến hiệu suất của ta, chính vì thế mà ta sử dụng memo để giải quyết vấn đề trên

const Product = memo(({products}) => {
  console.log("show product")
  return (
     <>
        <ul style={{display:'flex',flexWrap:'wrap'}}>
            {
              products.length>0 && products.map(({id,Title,Price,UrlImage})=>{
                return(
                   <>
                      <li key={id} style={{listStyle:'none',width:200,textAlign:'center',padding:20}}>
                        <img src={UrlImage} style={{height:80}} />
                        <h3 style={{fontSize:12}}>{Title.substring(0, 50) }</h3>
                        <mark>{Price}</mark>
                      </li>
                   </>
                )
              })
            }
        </ul>
     </>
  )
});

Bạn cập nhật lại thêm memo vào và chạy lại trình duyệt bạn bấm setCount xem lại kết quả thế nào nhé

x

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)