Trong React Native, sự khác biệt giữa useEffect và useLayoutEffect là gì và tại sao việc chọn sai có thể gây ra hiện tượng nhấp nháy (Flickering) trên giao diện?

Question

Accepted Answer

Cơ chế hoạt động

useEffect: Chạy bất đồng bộ sau khi component đã render và được hiển thị trên màn hình. Đây là lựa chọn mặc định cho hầu hết các tác vụ (API call, subscription).
useLayoutEffect: Chạy đồng bộ ngay sau khi React tính toán xong DOM/Layout nhưng trước khi màn hình được vẽ (paint).

Nguyên nhân gây nhấp nháy
Nếu bạn thực hiện thay đổi layout (ví dụ: thay đổi kích thước, vị trí element) trong useEffect, người dùng sẽ thấy trạng thái cũ trong một khoảnh khắc ngắn trước khi React cập nhật lại layout mới. Điều này tạo ra hiệu ứng nhấp nháy khó chịu.
Khi nào sử dụng useLayoutEffect
Chỉ sử dụng khi bạn cần đo đạc kích thước của một component và cập nhật lại UI ngay lập tức để tránh việc người dùng nhìn thấy sự thay đổi layout.
Lưu ý
Vì useLayoutEffect chạy đồng bộ, nó có thể làm chậm quá trình render nếu logic bên trong quá nặng, do đó cần hạn chế sử dụng tối đa.

Trong React Native, sự khác biệt giữa useEffect và useLayoutEffect là gì và tại sao việc chọn sai có thể gây ra hiện tượng nhấp nháy (Flickering) trên giao diện?

Cơ chế hoạt động

Nguyên nhân gây nhấp nháy

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ủ đề