Trong phần 4 này, chúng ta sẽ tiếp tục tìm hiểu cách sử dụng hook useRef, useCallback

1.useRef

useRef trong React Native là một hook dùng để tạo ra tham chiếu duy trì qua mỗi lần render. Nó giúp lưu và truy cập phần tử UI hoặc giá trị không muốn re-render component, thích hợp cho việc truy cập phần tử DOM, gọi hàm không khai báo và lưu giữ dữ liệu qua các lần cập nhật.

Cách sử dụng

const ref = useRef(initialValue)

initialValue: Giá trị khởi tạo ban đầu mà bạn muốn thuộc tính hiện tại của đối tượng ref. Nó có thể là một giá trị thuộc bất kỳ type nào. Paramter này bị bỏ qua sau lần render đầu tiên.

Hook này được sử dụng trong các trường hợp:

• Tham chiếu một giá trị bằng một ref
• Thao tác DOM với ref
• Tránh tạo lại nội dung ref
• Khi cần tham chiếu đến thành phần hoặc giá trị không làm render lại component.
• Khi muốn thực hiện các hành động trên thành phần, như focus vào TextInput, mà không cần render lại toàn bộ component.

Mục đích sử dụng

• Tham chiếu đến các thành phần UI: Điều này cho phép thực hiện các thao tác trên các thành phần mà không cần render lại component.
• Lưu giữ giá trị không cần render lại: useRef cũng được sử dụng để lưu giữ giá trị mà không cần render lại, giữ nguyên giá trị giữa các lượt render.

Lưu ý khi sử dụng useRef

• Tham chiếu không làm kích thích render lại: useRef không gây ra việc kích thích render lại component khi giá trị thay đổi, do đó thích hợp cho việc lưu giữ các giá trị không liên quan đến giao diện người dùng.
• Sử dụng ref để thực hiện các hành động không kích thích render lại: Sử dụng useRef để tham chiếu đến các thành phần và thực hiện các hành động mà không cần render lại component

Ví dụ minh họa

Ở ví dụ dưới đây, chúng ta sử dụng một Ref để theo dõi số lần nút được nhấp vào. Lưu ý rằng bạn có thể sử dụng ref thay vì state ở đây vì số lần nhấp chỉ được đọc và ghi trong trình xử lý event.

Nếu bạn hiển thị {ref.current} trong JSX, con số sẽ không cập nhật khi nhấp chuột. Nguyên nhân là do cài đặt ref.current không kích hoạt render lại. Thay vào đó, thông tin được sử dụng để hiển thị phải ở state

Hãy chạy thử đoạn code sau để hiểu nó

import { useRef } from 'react';

export default function Counter() {
let ref = useRef(0);

function handleClick() {
ref.current = ref.current + 1;
alert('You clicked ' + ref.current + ' times!');
}

return (
<button onClick={handleClick}>
Click me!
</button>
);
}

Nguồn dịch: (https://react.dev/reference/react/useRef)

2.useCallback

useCallback trong React Native là một hook dùng để giữ reference nhất quán cho callback function, tránh tạo hàm mới qua mỗi lần render nếu dependencies không đổi.

Cách sử dụng

const cachedFn = useCallback(fn, dependencies)

fn: Giá trị của function mà bạn muốn lưu vào bộ đệm. Nó có thể nhận bất kỳ arguments nào và trả về bất kỳ giá trị nào. React sẽ trả lại (không phải gọi!) chức năng của bạn cho bạn trong lần render đầu tiên. Trong lần render tiếp theo, React sẽ cung cấp lại cho bạn function tương tự nếu dependencies không thay đổi kể từ lần render cuối cùng. Nếu không, nó sẽ cung cấp cho bạn function mà bạn đã truyền trong quá trình render hiện tại và lưu trữ nó trong trường hợp nó có thể được sử dụng lại sau này. React sẽ không gọi function của bạn. function này được trả về cho bạn để bạn có thể quyết định khi nào và có nên gọi nó hay không.

dependencies: Bao gồm list tất cả các phụ thuộc để tính toán logic bao gồm props, state, và tất cả các biến and functions được khai báo trực tiếp bên trong component của bạn(component body).

Hook này được sử dụng trong các trường hợp

• Khi cần tránh việc tạo ra các phiên bản mới của callback function mỗi lần component render lại
• Khi performance là mối quan tâm và bạn muốn giảm tải cho các component con được truyền vào như props, tránh làm cho chúng re-render không cần thiết

Mục đích sử dụng

• Tối ưu hóa hiệu suất: Giúp tránh việc tạo ra các callback function mới khi không cần thiết, giảm việc re-render của các component con.
• Đảm bảo tính ổn định: Reference của callback function không thay đổi nếu dependencies không thay đổi, giúp đảm bảo tính ổn định trong UI.

Lưu ý khi sử dụng useCallback

• Sử dụng một cách cân nhắc: Không cần sử dụng useCallback cho mọi callback function. Chỉ sử dụng khi có sự cần thiết để tối ưu hóa hiệu suất.
• Xác định rõ dependencies: Đảm bảo rằng bạn xác định đúng các dependencies để useCallback có thể hoạt động chính xác.

Ví dụ minh họa

Bỏ qua việc render lại các components

Khi tối ưu hóa hiệu suất render, đôi khi bạn sẽ cần cache các functions mà bạn chuyển cho các thành phần con. Trước tiên, hãy xem cú pháp về cách thực hiện việc này và sau đó xem nó hữu ích trong trường hợp nào.

Để cache một function giữa các lần render lại component của bạn, hãy đưa định nghĩa của hàm đó vào useCallback Hook:

import { useCallback } from 'react';



function ProductPage({ productId, referrer, theme }) {

const handleSubmit = useCallback((orderDetails) => {

post('/product/' + productId + '/buy', {

referrer,

orderDetails,

});

}, [productId, referrer]);