Tại sao việc sử dụng các thư viện như Redux hoặc Zustand trong React Native cần cân nhắc kỹ về tần suất cập nhật State để tránh gây ra hiện tượng Re-render không cần thiết?

Question

Accepted Answer

Trong React Native, mỗi lần State thay đổi, component sẽ thực hiện quá trình render lại cây Virtual DOM. Nếu State được quản lý tập trung và cập nhật quá thường xuyên (ví dụ: cập nhật vị trí scroll hoặc dữ liệu cảm biến), ứng dụng sẽ bị treo.
Giải pháp tối ưu:

Selector Pattern: Chỉ chọn lọc những phần dữ liệu cần thiết từ Global Store thay vì lấy toàn bộ object.
Memoization: Sử dụng React.memo cho các component con để ngăn chặn render lại nếu props không thay đổi.
Local State: Ưu tiên sử dụng local state (useState) cho các dữ liệu chỉ phục vụ trong phạm vi một component hoặc một nhóm component nhỏ.

Ví dụ:
Sử dụng useShallow trong Zustand để tránh re-render khi object trả về có tham chiếu mới nhưng giá trị không đổi.

Tại sao việc sử dụng các thư viện như Redux hoặc Zustand trong React Native cần cân nhắc kỹ về tần suất cập nhật State để tránh gây ra hiện tượng Re-render không cần thiết?

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi react native liên quan cùng chủ đề