Khi nào và như thế nào để sử dụng useMemo trong React

Trong khi làm công việc phát triển giao diện người dùng, bạn có thể đã bắt gặp useMemo. Đối với những người chưa quen với nó, chúng tôi sẽ giải thích cách sử dụng useMemo trong React và cả những trường hợp sử dụng quan trọng/nổi bật nhất.

Sử dụngMemo là gì?

useMemo là một hook tích hợp tuyệt vời có thể giúp nâng cao hiệu suất của ứng dụng web của bạn. Chúng tôi biết rằng trong react , các thành phần được hiển thị bất cứ khi nào có thay đổi về trạng thái hoặc đạo cụ của thành phần.

Các thành phần được kết xuất lại cũng sẽ tính toán lại các chức năng đang được sử dụng bên trong.

Do đó, nếu có các chức năng nặng, đắt tiền, hiệu suất có thể bị ảnh hưởng vì chúng phải được tính toán mọi lúc. useMemo giúp ghi nhớ các chức năng này để tối ưu hóa hiệu suất.

UseMemo hoạt động như thế nào trong React?

Để hiểu useMemo, chúng ta cần xem lại ghi nhớ là gì .

Nếu có một chức năng nào đó tốn kém, chẳng hạn như tìm nạp nhiều dữ liệu, thì ghi nhớ là một cách để lưu trữ kết quả của chức năng đó để không phải gọi đi gọi lại.

useMemo sẽ nhận chức năng mà nó đang gói gọn và lưu vào bộ nhớ cache kết quả của chức năng đó để có thể cung cấp cho bạn khi cần thiết mà không cần thực hiện lại các tính toán.

Bạn sử dụng useMemo trong React như thế nào?

Là một hook tích hợp, bạn có thể nhập hook từ React và sử dụng nó ở cấp cao nhất.

Sau đó, bạn có thể kết thúc phép tính tốn kém của mình với useMemo bằng cách khai báo một số hằng số hoặc biến và gán nó cho kết quả hook của bạn.

Đừng quên thêm các thành phần phụ thuộc của bạn vì đây là cách useMemo xác định xem nó có phải tính toán lại hàm hay không.

Nếu sự phụ thuộc của bạn thay đổi, thì useMemo sẽ biết cách tính toán lại giá trị để nó luôn lưu vào bộ nhớ cache kết quả phù hợp.

 import { useMemo } from 'react' ; function someExpensiveFunction ( n ) {   return n * n; } function myFunction ( {n} ) {   const result = useMemo( () => someExpensiveFunction(n), [n]);   return (       < div > {result} </ div >
 ); }

Ví dụ: nếu bạn đã chuyển giá trị 5 thành

 n

 n

Điều này đặc biệt hữu ích khi ứng dụng giao diện người dùng của bạn đang yêu cầu một API.

Những yêu cầu này có thể tốn kém, đặc biệt nếu bạn đang tìm nạp một lượng lớn dữ liệu.

Có lẽ ứng dụng của bạn có một số thành phần cần dữ liệu này, nhưng bạn không muốn thực hiện lệnh gọi API mỗi khi thành phần đó được hiển thị.

Sau đó, lưu trữ kết quả của bạn bằng useMemo có thể là lựa chọn tốt nhất của bạn.

 import React, { useMemo } from 'react' ; import axios from 'axios' ; const ApiComponent = () => {   const memoizedResults = useMemo( async () => {       try {           const apiResponse = await axios.get( 'http://apicall.com/somedata' );           return apiResponse.data; } catch (error) {           return error; } }, []);   return (       < div > {apiResponse} </ div >
 ) }

Như bạn có thể thấy, phần phụ thuộc của chúng tôi trống vì chúng tôi chỉ muốn nó hiển thị một lần, vì giá trị sẽ không thực sự thay đổi. Chúng tôi chỉ muốn thực hiện cuộc gọi API một lần khi nó hiển thị lần đầu tiên.

Sau đó, giá trị này sẽ được sử dụng lại trong các lần hiển thị tiếp theo.

Khi nào sử dụng useMemo là một ý tưởng tồi?

Cũng hữu ích như hook, việc sử dụng useMemo liên tục không nhất thiết là một ý tưởng hay. Bạn có thể muốn bọc mọi chức năng bạn viết bằng useMemo để 'lưu' các phép tính.

Tuy nhiên, sử dụng nó khi không cần thiết thực sự có thể làm chậm ứng dụng của bạn.

1. Tính toán tầm thường

Nếu chức năng bạn đang gói với useMemo là một tính toán đơn giản, thì chi phí sử dụng useMemo có thể là do hậu quả nhiều hơn.

Nếu bạn có thể xác định rằng trọng số của chức năng của bạn là khá nhỏ, chẳng hạn như thời gian O(n), thì việc xác định rằng hook là không cần thiết là phù hợp.

2. Khi chức năng của bạn có thể ảnh hưởng đến các trạng thái và biến bên ngoài

Nếu chức năng của bạn liên quan đến việc sửa đổi các biến toàn cục khác hoặc phụ thuộc vào chúng, thì sử dụng useMemo có thể không phải là một ý kiến hay.

Như đã mô tả trước đây, useMemo chỉ tính toán lại chức năng khi một phụ thuộc thay đổi.

Tuy nhiên, nếu hàm sử dụng các biến hoặc lệnh gọi không nhất thiết phải là thay đổi phụ thuộc, thì hàm sẽ không tính toán lại giá trị, khiến kết quả được lưu trong bộ nhớ đệm không chính xác.

Sự khác biệt giữa useMemo và useCallback là gì?

Một số bạn cũng có thể quen thuộc với useCallback, phục vụ mục đích tương tự như useMemo. Bài viết này sẽ không đi sâu vào useCallback, nhưng chúng ta sẽ phân biệt khi nào thì sử dụng hai chức năng này.

Có thể dễ nhầm lẫn giữa useMemo và useCallback, vì cả hai đều là móc hoạt động để tối ưu hóa ứng dụng của bạn bằng cách ghi nhớ điều gì đó cho bạn. Tuy nhiên, điều quan trọng cần lưu ý là điều mà họ đang ghi nhớ là khác nhau.

Trong hầu hết các trường hợp, useMemo ghi nhớ các giá trị trong khi useCallback ghi nhớ các hàm. Như đã thấy trong tên, useCallback được sử dụng để ghi nhớ các chức năng gọi lại, đặc biệt là những chức năng được truyền lại cho các thành phần con dưới dạng đạo cụ. Các hàm gọi lại có thể phụ thuộc vào các giá trị hoặc tham chiếu nhất định có thể thay đổi theo thời gian, điều đó có nghĩa là các bản cập nhật cho các hàm này sẽ gây ra kết xuất lại trong các thành phần sử dụng chúng. Do đó, ghi nhớ chúng có thể giúp ngăn kết xuất lại, điều này có thể khiến chúng tôi phải tối ưu hóa.

Tuy nhiên, vì useMemo có thể ghi nhớ cả hàm và giá trị, nên nó có thể được sử dụng thay cho hook useCallback. Tuy nhiên, điều quan trọng là phải xem xét bối cảnh của tình huống của bạn và sử dụng móc một cách thích hợp để sử dụng chúng như dự kiến.

Suy nghĩ cuối cùng

useMemo tổng thể…là một hook tuyệt vời, linh hoạt có thể ghi nhớ các giá trị cho bạn và tránh kết xuất lại. Bằng cách sử dụng hook một cách chiến lược, bạn có thể tối ưu hóa ứng dụng của mình, giảm số lần tính toán và cho phép người dùng có trải nghiệm nhanh hơn và mượt mà hơn.

Hãy để useMemo mang đến cho người dùng của bạn một… trải nghiệm đáng nhớ!