Tối ưu hóa hiệu suất ReactJS với useMemo, useCallback, và PureComponents

jphopeblog

3 years ago

1. UseMemo(): Tối ưu hóa việc tính toán động

Trong ReactJS, nó thường xảy ra là component được re-rendered khi các props của nó bị thay đổi, khi state bị thay đổi hoặc khi props của bất kỳ một một component con nào cũng bị thay đổi. Điều này có nghĩa là nếu component của bạn dựa trên các đối tượng động, nó sẽ được thực hiện lại với mỗi lần re-render.

Để cải thiện điều này, chúng ta có thể sử dụng useMemo để cache giá trị của các biến động để tránh việc tính toán động khi component được re-rendered.

Ví dụ, nếu bạn đang tính toán tổng của tất cả các phần tử trong một mảng, điều này có thể trông như sau:

function getTotal(data) {
  let total = 0;
  data.forEach(item => {
    total += item;
  });
  return total;
}

function MyComponent({ data }) {
  const total = getTotal(data);
  return
  Total: {total}
}

Với mỗi lần re-render, getTotal sẽ được gọi và tính toán lại tổng. Điều này có thể gây ra tình trạng chậm trễ, đặc biệt khi dữ liệu có kích thước lớn.

Thay vì làm như vậy, chúng ta có thể sử dụng useMemo để lưu trữ giá trị của total như sau:

import { useMemo } from 'react';

function getTotal(data) {
  let total = 0;
  data.forEach(item => {
    total += item;
  });
  return total;
}

function MyComponent({ data }) {
  const total = useMemo(() => getTotal(data), [data]);
  return
  Total: {total}
}

Lúc này, total được lưu trữ bằng cách sử dụng useMemo và sẽ chỉ được tính toán lại khi data bị thay đổi. Với cách làm như vậy, chúng ta đã tối ưu hiệu suất của ứng dụng của mình.

2. UseCallback(): Tối ưu hóa việc truyền các hàm trong props

Bên cạnh useMemo, chúng ta có thể sử dụng useCallback để tối ưu hiệu suất của ứng dụng ReactJS của mình. useCallback giúp chúng ta tối ưu việc truyền các hàm qua props, giúp tránh việc re-render lại các component không cần thiết.

Ví dụ, nếu bạn có một component con có thể được kích hoạt bằng cách bấm vào một nút và gọi một hàm bên ngoài, điều này có thể trông như sau:

function MyButton({ onClick }) {
  return <button onclick="{onClick}">Click me</button>;
}
function MyComponent() {
  const handleClick = () => {
    // Do something
  };
  return <mybutton onclick="{handleClick}"></mybutton>;
}

Nhưng với cách làm này, nếu handleClick được tạo mới mỗi khi MyComponent được re-rendered thì MyButton sẽ được re-render và điều này có thể ảnh hưởng đến hiệu suất của ứng dụng. Để tránh điều này, chúng ta sử dụng useCallback như sau:

import { useCallback } from 'react';

function MyButton({ onClick }) {
  return <button onclick="{onClick}">Click me</button>;
}

function MyComponent() {
  const handleClick = useCallback(() => {
    // Do something
  }, []);
  return <mybutton onclick="{handleClick}"></mybutton>;
}

Bằng cách này, handleClick là một hàm được tạo lại khi dependencies () – một mảng chứa các đối tượng làm thay đổi callback – thay đổi. Nếu mảng rỗng và bạn không muốn callback thay đổi, useCallback sẽ luôn trả về với giá trị function của lần gọi đầu tiên.

Các hàm được tạo lại chỉ khi dependencies thay đổi và tránh qua lại các props không cần thiết giữa các components khác nhau, do đó giúp tăng hiệu suất của ứng dụng của bạn.

3. PureComponents: Tự động sắp xếp các thông tin không cần thiết

PureComponents là một loại component đặc biệt trong ReactJS, nó sẽ tự động sắp xếp các thông tin trong props và state mà không ảnh hưởng đến hiệu suất được biết như PureComponent. Với component này, các thông tin không cần thiết được tự động bỏ qua, giúp tránh việc re-render không cần thiết.

Ví dụ:

class MyComponent extends React.PureComponent {
  render() {
    return
    Hello World!;
  }
}

Như bạn có thể thấy, không có props hay state, điều này có nghĩa là khi PureComponent được re-render, không có thông tin nào trong component cần được cập nhật.

Tuy nhiên, PureComponent không phải là một giải pháp cho tất cả các trường hợp. Nếu bạn cần đến việc so sánh các đối tượng phức tạp hơn, bạn nên sử dụng kỹ thuật so sánh tùy chỉnh để đảm bảo rằng chỉ có các component cần được cập nhật khi có sự thay đổi trong dữ liệu.

Kết luận

Ở đay tôi đã giới thiệu với bạn những kỹ thuật tối ưu hóa hiệu suất trong ReactJS để giảm thiểu việc re-render không cần thiết và tối ưu hóa bộ nhớ. Sử dụng useMemo, useCallback, và PureComponents, chúng ta có thể tối ưu hóa ứng dụng của mình và cải thiện trải nghiệm người dùng. Bạn có thể xem các kỹ năng nâng cao khác của reactjs tại đây: ReactJS: các kỹ thuật lập trình nâng cao và thực hành tốt nhất bạn phải biết.

Chúc bạn thành công.

1. UseMemo(): Tối ưu hóa việc tính toán động

2. UseCallback(): Tối ưu hóa việc truyền các hàm trong props

3. PureComponents: Tự động sắp xếp các thông tin không cần thiết

Kết luận

SHARE BÀI VIẾT NÀY