# Tối ưu hoá việc re-render với React.memo và useMemo

Giới thiệu

Tối ưu hoá re-render cũng là việc tối ưu hoá hiệu suất ứng dụng (performance optimization). Hôm nay mình sẽ giới thiệu cho các bạn về React.memo và useMemo

React.memo

Class components có thể ngăn chặn việc render khi props được truyền vào là giống nhau bằng cách sử dụng PureComponent hoặc shouldComponentUpdate. Bây giờ bạn cũng có thể làm điều này tương tự với function components bằng cách gói chúng trong React.memo.

Nếu function component của bạn render cùng một kết quả được cung cấp cùng một props. Bạn có thể gói nó trong React.memo để giúp tăng hiệu suất trong một số trường hợp bằng cách ghi nhớ kết quả. Điều này có nghĩa là React sẽ bỏ qua việc render component và sử dụng lại kết quả được render cuối cùng.

import React from 'react';

const ItemUser = props => {
  return (
    <div>
      <p>userName: {props.username}</p>
      <span>age: {props.age}</span>
    </div>
  );
}

export default React.memo(ItemUser); 
// chỉ re-render khi props thay đổi

Theo mặc định, React.memo sẽ chỉ làm shallowly compare đối với các object phức tạp trong props object. Nếu bạn muốn kiểm soát việc compare, bạn cũng có thể cung cấp một custom comparison function ở đối số thứ hai của React.memo

Dưới đây mình sẽ kiểm tra xem tuổi truyền vào có lớn hơn tuổi hiện tại thì sẽ cho funtion component render lại. Nhưng ItemUser sẽ render lại khi compareProps trả về false và không render khi compareProps trả về true. Ngược lại với cách hoạt động của shouldComponentUpdate. Nên trong function compareProps mình sẽ kiểm tra ngược lại để có được kết quả mong muốn và gắn compareProps vào đối số thứ 2 của React.memo

import React from "react";

const compareProps = (prevProps, nextProps) => {
  return nextProps.age <= prevProps.age;
};

const ItemUser = props => {
  return (
    <div>
      <p>userName: {props.username}</p>
      <span>age: {props.age}</span>
    </div>
  );
};

export default React.memo(ItemUser, compareProps);

React.memo là một higher order component. Nó tương tự như React.PureComponent nhưng dành cho function components thay vì là class. Và nó cực kì hữu dụng khi mới đây React ra mắt HOOKS ở phiên bản 16.8

useMemo ( Hooks API )

<blockquote> Hooks chính thức được giới thiệu trong phiên bản React 16.8. Nó cho phép chúng ta sử dụng state và các tính năng khác của React mà không phải dùng đến Class. </blockquote>

Khá giống với React.memo, useMemo giúp ta kiểm soát việc được render dư thừa của các component con, chỉ khác là nó nằm trong Hook. Bằng cách truyền vào 1 tham số thứ 2 thì chỉ khi tham số này thay đổi thì thằng useMemo mới được thực thi. Ví dụ:

const Users = (props) => {
  const showUsers = data => {
    return data.map((item, index) => {
      return <ItemUser 
        key={index} 
        username={item.userName} 
        age={item.age} 
      />;
    });
  };

  const checkDataUser = useMemo(() => showUsers(props.dataUser), [props.dataUser]);

  return <div className="App">
    {checkDataUser}
  </div>;
}

export default Users;

Trên đây function component User đảm nhiệm việc hiển thị một danh sách users. Trong này hàm checkDataUser sẽ sử dụng userMemo để kiểm tra dataUser truyền vào có thay đổi hay không để xác định có nên chạy lại funtion showUsers hay không. Như thế nó khá giống với ví dụ cho React.memo ở trên phải không nào.

Tóm cái váy lại, chúng ta đã tìm hiểu xong tối ưu việc tối ưu hoá hiệu suất ứng dụng bằng React.memo và useMemo. Còn ngại gì nữa triển khai nó vào dự án nào =))