useCallbacklà một trong những hooks của React được sử dụng để tối ưu hóa hiệu suất của ứng dụng. Nó giúp tránh việc render lại các thành phần của ứng dụng mỗi khi một phương thức hoặc giá trị được truyền vào đó. useCallback sử dụng cơ chế memoization để lưu trữ giá trị đã tính toán trước đó và sử dụng lại chúng nếu cần thiết, giúp tiết kiệm thời gian và tài nguyên cho ứng dụng.
Bằng cách sử dụng useCallback, chúng ta có thể cải thiện hiệu suất của ứng dụng và tránh việc render lại các thành phần không cần thiết.
Sử dụng useCallback trong React Js
Để sử dụng useCallback trong React Js, ta cần import nó từ thư viện react và khai báo trong component như sau:
import React, { useCallback } from 'react';
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> MyComponent() {
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);
return (
<div>
<button onClick={memoizedCallback}>Click me</button>
</div>
);
}
Trong đó, memoizedCallback là một function đã được memoize và chỉ được tính toán lại khi các dependencies (a, b) thay đổi. Khi sử dụng useCallback, ta giúp tránh việc re-render không cần thiết cho component, tăng hiệu suất và tốc độ ứng dụng.
Ví dụ đơn giản về cách sử dụng useCallback
Dưới đây là một ví dụ đơn giản về cách sử dụng useCallback trong React để tối ưu hóa hiệu suất của component:
import React, { <a href="https://nodemy.vn/doi-chut-ve-usestate-trong-react-hooks/">useState</a>, useCallback } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<h1><span class="ez-toc-section" id="Count_count"></span>Count: {count}<span class="ez-toc-section-end"></span></h1>
<button onClick={increment}>Increment</button>
</div>
);
}
Ở đây, chúng ta khai báo một function increment sử dụng useCallback. Để đảm bảo rằng increment không bị tạo lại mỗi khi component render lại, chúng ta truyền vào dependencies count trong mảng thứ 2 của useCallback. Khi giá trị của count thay đổi, React sẽ tạo lại function increment, trong trường hợp này, chúng ta muốn increment được tạo lại khi và chỉ khi giá trị của count thay đổi.
Function increment này sẽ được sử dụng trong callback của sự kiện onClick của button, khi click vào button, state count sẽ được tăng lên 1.
Với việc sử dụng useCallback, chúng ta có thể tối ưu hóa hiệu suất của component bằng cách tránh việc tạo lại các function mới mỗi khi component render lại.
Kết luận va bài viết có liên quan
bài viết có liên quan:
Tìm hiểu về useContext trong React Js
Sử dụng useReducer hook trong React
Cách kiểu dữ liệu nguyên thủy trong TypeScript
