useMemo: nó là gì, lưu trữ tính toán và React Native

useMemo trong React Native là gì

useMemo — là một hook từ thư viện chuẩn của React, có sẵn trong React Native mà không cần gói bổ sung. Nó ghi nhớ giá trị được trả về bởi hàm được truyền vào và tái sử dụng giá trị này trong các lần render sau cho đến khi các dependency được chỉ định trong mảng thay đổi.

Tên của hook bắt nguồn từ memoization — một kỹ thuật tối ưu hóa trong đó kết quả của một hàm tốn kém được lưu vào bộ nhớ đệm. Khi gọi lại với cùng đối số, giá trị được lưu trong bộ nhớ đệm sẽ được trả về thay vì tính toán lại.

Trong bối cảnh React Native, ghi nhớ đặc biệt quan trọng do các đặc điểm kiến trúc. Mỗi lần render lại component sẽ gửi dữ liệu qua cầu nối JavaScript — Gốc, tốn thời gian. Nếu component chứa các tính toán tốn kém (lọc danh sách, sắp xếp, định dạng), mỗi lần render lại sẽ lặp lại chúng, chặn luồng JS và gây ra rớt khung hình.

Theo React Native Performance Docs, 2024, nút thắt cổ chai thường không phải là việc render các component gốc, mà là việc thực thi logic JavaScript giữa các lần render. useMemo giải quyết chính xác vấn đề này.

Cơ chế ghi nhớ giá trị hoạt động như thế nào

useMemo nhận một hàm và một mảng dependency, trả về một giá trị được ghi nhớ. React lưu trữ giá trị trước đó và mảng dependency. Ở mỗi lần render, React so sánh các dependency hiện tại với các dependency trước đó bằng Object.is. Nếu có ít nhất một dependency thay đổi, hàm được thực thi lại và kết quả được lưu trữ.

Cú pháp và truyền đối số

Chữ ký của useMemo hoàn toàn giống nhau trên web và trong React Native. Đối số đầu tiên là một hàm không tham số trả về giá trị cần ghi nhớ. Đối số thứ hai là một mảng dependency, khi thay đổi sẽ kích hoạt tính toán lại giá trị.

import React, { useMemo } from 'react';

const sortedList = useMemo(() => {
    return items.sort((a, b) => a.name.localeCompare(b.name));
}, [items]);

Trong ví dụ này, sortedList chỉ được tính toán lại khi tham chiếu đến mảng items thay đổi. Nếu nội dung mảng thay đổi nhưng tham chiếu vẫn giữ nguyên (đột biến), useMemo sẽ không phát hiện được thay đổi — đây là một hạn chế quan trọng.

So sánh dependency qua Object.is

React sử dụng thuật toán Object.is để so sánh dependency, hoạt động tương tự như toán tử so sánh nghiêm ngặt === nhưng xử lý NaN đúng cách (+0 và -0 được coi là khác nhau). Điều này có nghĩa là đối với các kiểu nguyên thủy (chuỗi, số, boolean), so sánh hoạt động theo giá trị, còn đối với đối tượng và mảng — theo tham chiếu.

// Object.is({'a': 1}, {'a': 1}) -> false (different refs)
// Object.is(42, 42) -> true (primitive by value)
// Object.is(NaN, NaN) -> true (correct handling of NaN)

Hiểu cơ chế này rất quan trọng: nếu bạn truyền một đối tượng mới vào dependency ở mỗi lần render, việc ghi nhớ sẽ vô dụng vì các dependency sẽ được coi là đã thay đổi mỗi lần.

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

useMemo hợp lý trong ba tình huống: tính toán tốn kém, truyền props ổn định cho component con và giữ nguyên nhận dạng tham chiếu của đối tượng. Trong React Native, cả ba tình huống đều xảy ra thường xuyên do kiến trúc của ứng dụng di động.

Tính toán tốn kém

Nếu một component xử lý mảng dữ liệu lớn (lọc, sắp xếp, nhóm) hoặc các thao tác toán học tốn tài nguyên, useMemo ngăn chặn việc lặp lại các tính toán này ở mỗi lần render lại. Trong ứng dụng di động, một ví dụ điển hình là định dạng dữ liệu từ API trước khi hiển thị trong danh sách.

Props ổn định cho component con

Khi một component con được bọc trong React.memo, nó chỉ render lại khi props của nó thay đổi. Nếu một đối tượng prop được tạo bên trong component cha mà không có useMemo, một tham chiếu mới sẽ được tạo ở mỗi lần render của cha, và component con sẽ render lại không cần thiết, làm mất đi lợi ích của React.memo.

Ghi nhớ tính toán kiểu dáng

Trong React Native, kiểu dáng thường phụ thuộc vào props — ví dụ, chiều rộng của một phần tử được tính toán dựa trên kích thước màn hình. useMemo cho phép tính toán các kiểu dáng động này chỉ khi các tham số đầu vào thay đổi.

Khi nào useMemo vô dụng

useMemo không phải là công cụ tối ưu hóa vạn năng. Trong nhiều tình huống, nó không mang lại lợi ích và thậm chí có thể làm giảm hiệu suất do chi phí lưu trữ và so sánh dependency. Trong React Native, nơi mỗi byte bộ nhớ đều quan trọng, việc áp dụng useMemo một cách mù quáng mà không đo lường hiệu quả là một phản mẫu.

Hook không mang lại lợi ích trong ba trường hợp chính. Thứ nhất, nếu tính toán đơn giản (cộng đơn giản, nối chuỗi), chi phí của useMemo vượt quá chi phí của chính tính toán đó. Thứ hai, nếu dependency thay đổi mỗi lần render — hàm vẫn sẽ được thực thi, và ghi nhớ chỉ thêm công việc không cần thiết. Thứ ba, nếu component hiếm khi render, chi phí lưu trữ bộ nhớ đệm là không hợp lý.

Theo Kent C. Dodds, 2023, trước khi thêm useMemo, bạn nên đo lường vấn đề bằng React DevTools Profiler hoặc Performance Monitor tích hợp trong React Native. Nếu việc render lại một component mất ít hơn 1 ms, ghi nhớ là không cần thiết.

• Tính toán đơn giản — cộng, nối, thao tác ba ngôi đơn giản
• Render lại hiếm — màn hình tĩnh chỉ render một lần
• Dependency thay đổi — nếu dependency mới ở mỗi lần render, ghi nhớ vô dụng
• Giá trị nguyên thủy — số và chuỗi không cần ghi nhớ, chúng vốn đã nhẹ

useMemo và useCallback: so sánh

useMemo và useCallback — hai hook ghi nhớ của React thường bị nhầm lẫn. Sự khác biệt nằm ở những gì chúng bảo tồn: useMemo trả về kết quả thực thi của một hàm (bất kỳ giá trị nào), trong khi useCallback trả về chính hàm đó. Cả hai đều nhận mảng dependency, nhưng cú pháp khác nhau.

Trong thực tế, useCallback là đường cú pháp trên useMemo cho các trường hợp bạn cần ghi nhớ một hàm. Trong React Native, cả hai hook được sử dụng với tần suất ngang nhau: useMemo — cho dữ liệu (văn bản đã định dạng, kiểu đã tính toán), useCallback — cho trình xử lý sự kiện (onPress, onChangeText).

Ví dụ thực tế với useMemo

Hãy xem xét hai tình huống thực tế khi sử dụng useMemo trong ứng dụng React Native. Thứ nhất là lọc danh sách liên hệ theo truy vấn tìm kiếm, thứ hai là tính toán kiểu dáng động dựa trên kích thước màn hình.

Ví dụ 1: tìm kiếm và lọc danh sách

Trong ví dụ này, useMemo ngăn chặn việc lọc lặp lại một danh sách liên hệ lớn ở mỗi lần render nếu cả truy vấn tìm kiếm và dữ liệu nguồn đều không thay đổi.

const ContactList = ({ contacts, searchQuery }) => {
    const filteredContacts = useMemo(() => {
        if (!searchQuery.trim()) return contacts;
        const query = searchQuery.toLowerCase();
        return contacts.filter((c) =>
            c.name.toLowerCase().includes(query) ||
            c.phone.includes(query)
        );
    }, [contacts, searchQuery]);

    return (
        <FlatList
            data={filteredContacts}
            renderItem={renderContact}
            keyExtractor={(item) => item.id}
        />
    );
};

Không có useMemo, việc lọc sẽ thực thi ở mỗi lần render, bao gồm cả những lần do hoạt ảnh hoặc thay đổi trạng thái ở các phần khác của component gây ra. Với useMemo, việc lọc chỉ chạy khi contacts hoặc searchQuery thay đổi.

Ví dụ 2: tính toán kiểu dáng động

Trong React Native, kiểu dáng thường phụ thuộc vào kích thước màn hình hoặc props của component. useMemo cho phép tính toán đối tượng kiểu dáng đó một lần và tái sử dụng cho đến khi dependency thay đổi.

const Card = ({ title, isSelected }) => {
    const cardStyle = useMemo(() => ({
        backgroundColor: isSelected ? '#e3f2fd' : '#ffffff',
        borderWidth: isSelected ? 2 : 1,
        padding: 16,
    }), [isSelected]);

    return (
        <View style={cardStyle}>
            <Text>{title}</Text>
        </View>
    );
};

Cách tiếp cận này đảm bảo rằng đối tượng cardStyle giữ ổn định (cùng tham chiếu) cho đến khi isSelected thay đổi. Nếu Card được bọc trong React.memo, mẫu này ngăn chặn việc render lại không cần thiết của các phần tử con.