React useCallback: Làm chủ Memoization hàm để tối ưu hóa hiệu suất

Trong lĩnh vực phát triển React, tối ưu hóa hiệu suất là yếu tố hàng đầu để mang lại trải nghiệm người dùng mượt mà và nhạy bén. Một công cụ mạnh mẽ trong kho vũ khí của nhà phát triển React để đạt được điều này là useCallback, một React Hook cho phép memoization hàm. Hướng dẫn toàn diện này sẽ đi sâu vào các chi tiết phức tạp của useCallback, khám phá mục đích, lợi ích và các ứng dụng thực tế của nó trong việc tối ưu hóa các component React.

Hiểu về Memoization hàm

Về cơ bản, memoization là một kỹ thuật tối ưu hóa bao gồm việc lưu vào bộ nhớ đệm (cache) kết quả của các lệnh gọi hàm tốn kém và trả về kết quả đã cache khi các đầu vào tương tự xuất hiện trở lại. Trong bối cảnh của React, memoization hàm với useCallback tập trung vào việc bảo toàn định danh của một hàm qua các lần render, ngăn chặn việc re-render không cần thiết của các component con phụ thuộc vào hàm đó.

Nếu không có useCallback, một instance hàm mới được tạo ra trong mỗi lần render của một functional component, ngay cả khi logic và các phụ thuộc của hàm không thay đổi. Điều này có thể dẫn đến các điểm nghẽn hiệu suất khi các hàm này được truyền dưới dạng props cho các component con, khiến chúng re-render một cách không cần thiết.

Giới thiệu về Hook useCallback

Hook useCallback cung cấp một cách để memoize các hàm trong các functional component của React. Nó chấp nhận hai đối số:

1. Một hàm cần được memoize.
2. Một mảng các phụ thuộc (dependencies).

useCallback trả về một phiên bản đã được memoize của hàm, phiên bản này chỉ thay đổi nếu một trong các phụ thuộc trong mảng phụ thuộc đã thay đổi giữa các lần render.

Đây là một ví dụ cơ bản:

import React, { useCallback } from 'react';

function MyComponent() {
 const handleClick = useCallback(() => {
 console.log('Button clicked!');
 }, []); // Mảng phụ thuộc rỗng

 return Click me;
}

export default MyComponent;

Trong ví dụ này, hàm handleClick được memoize bằng useCallback với một mảng phụ thuộc rỗng ([]). Điều này có nghĩa là hàm handleClick sẽ chỉ được tạo một lần khi component render lần đầu, và định danh của nó sẽ không thay đổi qua các lần re-render tiếp theo. Prop onClick của button sẽ luôn nhận được cùng một instance hàm, ngăn chặn việc re-render không cần thiết của component button (nếu nó là một component phức tạp hơn có thể hưởng lợi từ việc memoization).

Lợi ích của việc sử dụng useCallback

• Ngăn chặn Re-render không cần thiết: Lợi ích chính của useCallback là ngăn chặn việc re-render không cần thiết của các component con. Khi một hàm được truyền dưới dạng prop thay đổi trong mỗi lần render, nó sẽ kích hoạt việc re-render của component con, ngay cả khi dữ liệu cơ bản không thay đổi. Việc memoize hàm với useCallback đảm bảo rằng cùng một instance hàm được truyền xuống, tránh các lần re-render không cần thiết.
• Tối ưu hóa hiệu suất: Bằng cách giảm số lần re-render, useCallback góp phần cải thiện hiệu suất đáng kể, đặc biệt là trong các ứng dụng phức tạp có các component lồng sâu.
• Cải thiện khả năng đọc mã nguồn: Sử dụng useCallback có thể làm cho mã nguồn của bạn dễ đọc và dễ bảo trì hơn bằng cách khai báo rõ ràng các phụ thuộc của một hàm. Điều này giúp các nhà phát triển khác hiểu được hành vi và các tác dụng phụ tiềm tàng của hàm.

Ví dụ thực tế và các trường hợp sử dụng

Ví dụ 1: Tối ưu hóa một Component danh sách

Hãy xem xét một kịch bản nơi bạn có một component cha render một danh sách các mục bằng cách sử dụng một component con gọi là ListItem. Component ListItem nhận một prop onItemClick, là một hàm xử lý sự kiện click cho mỗi mục.

import React, { useState, useCallback } from 'react';

function ListItem({ item, onItemClick }) {
 console.log(`ListItem rendered for item: ${item.id}`);
 return 
 onItemClick(item.id)}>{item.name}
;
}

const MemoizedListItem = React.memo(ListItem);

function MyListComponent() {
 const [items, setItems] = useState([
 { id: 1, name: 'Item 1' },
 { id: 2, name: 'Item 2' },
 { id: 3, name: 'Item 3' },
 ]);
 const [selectedItemId, setSelectedItemId] = useState(null);

 const handleItemClick = useCallback((id) => {
 console.log(`Item clicked: ${id}`);
 setSelectedItemId(id);
 }, []); // Không có phụ thuộc, nên nó không bao giờ thay đổi

 return (
 

 {items.map(item => (
 
 ))}
 
 );
}

export default MyListComponent;

Trong ví dụ này, handleItemClick được memoize bằng useCallback. Điều quan trọng là component ListItem được bọc trong React.memo, thực hiện so sánh nông các props. Vì handleItemClick chỉ thay đổi khi các phụ thuộc của nó thay đổi (mà chúng không thay đổi, vì mảng phụ thuộc là rỗng), React.memo ngăn ListItem re-render nếu trạng thái `items` thay đổi (ví dụ: nếu chúng ta thêm hoặc bớt các mục).

Nếu không có useCallback, một hàm handleItemClick mới sẽ được tạo ra trong mỗi lần render của MyListComponent, khiến mỗi ListItem phải re-render ngay cả khi dữ liệu của chính mục đó không thay đổi.

Ví dụ 2: Tối ưu hóa một Component biểu mẫu

Hãy xem xét một component biểu mẫu nơi bạn có nhiều trường nhập liệu và một nút gửi. Mỗi trường nhập liệu có một trình xử lý onChange để cập nhật trạng thái của component. Bạn có thể sử dụng useCallback để memoize các trình xử lý onChange này, ngăn chặn việc re-render không cần thiết của các component con phụ thuộc vào chúng.

import React, { useState, useCallback } from 'react';

function MyFormComponent() {
 const [name, setName] = useState('');
 const [email, setEmail] = useState('');

 const handleNameChange = useCallback((event) => {
 setName(event.target.value);
 }, []);

 const handleEmailChange = useCallback((event) => {
 setEmail(event.target.value);
 }, []);

 const handleSubmit = useCallback((event) => {
 event.preventDefault();
 console.log(`Name: ${name}, Email: ${email}`);
 }, [name, email]);

 return (
 

 
 Name:
 
 
 
 Email:
 
 
 Submit
 
 );
}

export default MyFormComponent;

Trong ví dụ này, handleNameChange, handleEmailChange, và handleSubmit đều được memoize bằng useCallback. handleNameChange và handleEmailChange có mảng phụ thuộc rỗng vì chúng chỉ cần thiết lập trạng thái và không dựa vào bất kỳ biến bên ngoài nào. handleSubmit phụ thuộc vào trạng thái `name` và `email`, vì vậy nó sẽ chỉ được tạo lại khi một trong hai giá trị đó thay đổi.

Ví dụ 3: Tối ưu hóa Thanh tìm kiếm toàn cục

Hãy tưởng tượng bạn đang xây dựng một trang web cho một nền tảng thương mại điện tử toàn cầu cần xử lý tìm kiếm bằng nhiều ngôn ngữ và bộ ký tự khác nhau. Thanh tìm kiếm là một component phức tạp, và bạn muốn đảm bảo hiệu suất của nó được tối ưu hóa.

import React, { useState, useCallback } from 'react';

function SearchBar({ onSearch }) {
 const [searchTerm, setSearchTerm] = useState('');

 const handleInputChange = (event) => {
 setSearchTerm(event.target.value);
 };

 const handleSearch = useCallback(() => {
 onSearch(searchTerm);
 }, [searchTerm, onSearch]);

 return (
 

 
 Search
 
 );
}

export default SearchBar;

Trong ví dụ này, hàm handleSearch được memoize bằng useCallback. Nó phụ thuộc vào searchTerm và prop onSearch (mà chúng ta giả định cũng được memoize trong component cha). Điều này đảm bảo rằng hàm tìm kiếm chỉ được tạo lại khi thuật ngữ tìm kiếm thay đổi, ngăn chặn việc re-render không cần thiết của component thanh tìm kiếm và bất kỳ component con nào mà nó có thể có. Điều này đặc biệt quan trọng nếu `onSearch` kích hoạt một hoạt động tốn kém về mặt tính toán như lọc một danh mục sản phẩm lớn.

Khi nào nên sử dụng useCallback

Mặc dù useCallback là một công cụ tối ưu hóa mạnh mẽ, điều quan trọng là phải sử dụng nó một cách hợp lý. Lạm dụng useCallback thực sự có thể làm giảm hiệu suất do chi phí tạo và quản lý các hàm được memoize.

Dưới đây là một số hướng dẫn về thời điểm sử dụng useCallback:

• Khi truyền hàm dưới dạng props cho các component con được bọc trong React.memo: Đây là trường hợp sử dụng phổ biến và hiệu quả nhất cho useCallback. Bằng cách memoize hàm, bạn có thể ngăn component con re-render một cách không cần thiết.
• Khi sử dụng hàm bên trong các hook useEffect: Nếu một hàm được sử dụng làm phụ thuộc trong hook useEffect, việc memoize nó với useCallback có thể ngăn effect chạy không cần thiết trong mỗi lần render. Điều này là do định danh của hàm sẽ chỉ thay đổi khi các phụ thuộc của nó thay đổi.
• Khi xử lý các hàm tốn kém về mặt tính toán: Nếu một hàm thực hiện một phép tính hoặc hoạt động phức tạp, việc memoize nó với useCallback có thể tiết kiệm thời gian xử lý đáng kể bằng cách lưu kết quả vào bộ nhớ đệm.

Ngược lại, hãy tránh sử dụng useCallback trong các tình huống sau:

• Đối với các hàm đơn giản không có phụ thuộc: Chi phí của việc memoize một hàm đơn giản có thể lớn hơn lợi ích mà nó mang lại.
• Khi các phụ thuộc của hàm thay đổi thường xuyên: Nếu các phụ thuộc của hàm liên tục thay đổi, hàm được memoize sẽ được tạo lại trong mỗi lần render, làm mất đi lợi ích về hiệu suất.
• Khi bạn không chắc chắn liệu nó có cải thiện hiệu suất hay không: Luôn đo lường hiệu suất mã nguồn của bạn trước và sau khi sử dụng useCallback để đảm bảo rằng nó thực sự cải thiện hiệu suất.

Cạm bẫy và những lỗi thường gặp

• Quên các phụ thuộc: Lỗi phổ biến nhất khi sử dụng useCallback là quên bao gồm tất cả các phụ thuộc của hàm trong mảng phụ thuộc. Điều này có thể dẫn đến closures cũ (stale closures) và hành vi không mong muốn. Luôn xem xét cẩn thận các biến mà hàm phụ thuộc và bao gồm chúng trong mảng phụ thuộc.
• Tối ưu hóa quá mức: Như đã đề cập trước đó, lạm dụng useCallback có thể làm giảm hiệu suất. Chỉ sử dụng nó khi thực sự cần thiết và khi bạn có bằng chứng cho thấy nó đang cải thiện hiệu suất.
• Mảng phụ thuộc không chính xác: Đảm bảo rằng các phụ thuộc là chính xác là rất quan trọng. Ví dụ, nếu bạn đang sử dụng một biến trạng thái bên trong hàm, bạn phải bao gồm nó trong mảng phụ thuộc để đảm bảo rằng hàm được cập nhật khi trạng thái thay đổi.

Các phương án thay thế cho useCallback

Mặc dù useCallback là một công cụ mạnh mẽ, có những cách tiếp cận thay thế để tối ưu hóa hiệu suất hàm trong React:

• React.memo: Như đã được trình bày trong các ví dụ, việc bọc các component con trong React.memo có thể ngăn chúng re-render nếu props của chúng không thay đổi. Điều này thường được sử dụng kết hợp với useCallback để đảm bảo rằng các props hàm được truyền cho component con vẫn ổn định.
• useMemo: Hook useMemo tương tự như useCallback, nhưng nó memoize *kết quả* của một lệnh gọi hàm thay vì chính hàm đó. Điều này có thể hữu ích để memoize các phép tính hoặc chuyển đổi dữ liệu tốn kém.
• Code Splitting: Code splitting bao gồm việc chia ứng dụng của bạn thành các phần nhỏ hơn được tải theo yêu cầu. Điều này có thể cải thiện thời gian tải ban đầu và hiệu suất tổng thể.
• Virtualization: Các kỹ thuật ảo hóa, chẳng hạn như windowing, có thể cải thiện hiệu suất khi render các danh sách dữ liệu lớn bằng cách chỉ render các mục có thể nhìn thấy.

useCallback và tính bình đẳng tham chiếu (Referential Equality)

useCallback đảm bảo tính bình đẳng tham chiếu cho hàm được memoize. Điều này có nghĩa là định danh của hàm (tức là tham chiếu đến hàm trong bộ nhớ) vẫn giữ nguyên qua các lần render miễn là các phụ thuộc không thay đổi. Điều này rất quan trọng để tối ưu hóa các component dựa vào kiểm tra bình đẳng nghiêm ngặt để xác định có nên re-render hay không. Bằng cách duy trì cùng một định danh hàm, useCallback ngăn chặn các lần re-render không cần thiết và cải thiện hiệu suất tổng thể.

Ví dụ thực tế: Mở rộng quy mô cho các ứng dụng toàn cầu

Khi phát triển các ứng dụng cho đối tượng toàn cầu, hiệu suất trở nên quan trọng hơn nữa. Thời gian tải chậm hoặc tương tác ì ạch có thể ảnh hưởng đáng kể đến trải nghiệm người dùng, đặc biệt là ở các khu vực có kết nối internet chậm hơn.

• Quốc tế hóa (i18n): Hãy tưởng tượng một hàm định dạng ngày và số theo ngôn ngữ của người dùng. Việc memoize hàm này với useCallback có thể ngăn chặn các lần re-render không cần thiết khi ngôn ngữ ít thay đổi. Ngôn ngữ sẽ là một phụ thuộc.
• Tập dữ liệu lớn: Khi hiển thị các tập dữ liệu lớn trong bảng hoặc danh sách, việc memoize các hàm chịu trách nhiệm lọc, sắp xếp và phân trang có thể cải thiện đáng kể hiệu suất.
• Hợp tác thời gian thực: Trong các ứng dụng hợp tác, chẳng hạn như các trình soạn thảo tài liệu trực tuyến, việc memoize các hàm xử lý đầu vào của người dùng và đồng bộ hóa dữ liệu có thể giảm độ trễ và cải thiện khả năng phản hồi.

Các phương pháp hay nhất khi sử dụng useCallback

• Luôn bao gồm tất cả các phụ thuộc: Kiểm tra kỹ để đảm bảo mảng phụ thuộc của bạn bao gồm tất cả các biến được sử dụng bên trong hàm useCallback.
• Sử dụng với React.memo: Kết hợp useCallback với React.memo để đạt được lợi ích hiệu suất tối ưu.
• Đo lường hiệu suất mã nguồn của bạn: Đo lường tác động hiệu suất của useCallback trước và sau khi triển khai.
• Giữ cho các hàm nhỏ và tập trung: Các hàm nhỏ hơn, tập trung hơn sẽ dễ dàng memoize và tối ưu hóa hơn.
• Cân nhắc sử dụng linter: Các linter có thể giúp bạn xác định các phụ thuộc bị thiếu trong các lệnh gọi useCallback của mình.

Kết luận

useCallback là một công cụ có giá trị để tối ưu hóa hiệu suất trong các ứng dụng React. Bằng cách hiểu mục đích, lợi ích và các ứng dụng thực tế của nó, bạn có thể ngăn chặn hiệu quả các lần re-render không cần thiết và cải thiện trải nghiệm người dùng tổng thể. Tuy nhiên, điều cần thiết là phải sử dụng useCallback một cách hợp lý và đo lường hiệu suất mã nguồn của bạn để đảm bảo rằng nó thực sự cải thiện hiệu suất. Bằng cách tuân theo các phương pháp hay nhất được nêu trong hướng dẫn này, bạn có thể làm chủ memoization hàm và xây dựng các ứng dụng React hiệu quả và nhạy bén hơn cho đối tượng toàn cầu.

Hãy nhớ luôn phân tích (profile) các ứng dụng React của bạn để xác định các điểm nghẽn hiệu suất và sử dụng useCallback (cùng các kỹ thuật tối ưu hóa khác) một cách chiến lược để giải quyết các điểm nghẽn đó một cách hiệu quả.

Đọc thêm

• Tài liệu React useCallback
• Tối ưu hóa hiệu suất trong React
• useMemo và useCallback