useEffect và useLayoutEffect trong React
React cung cấp hai hook mạnh mẽ để xử lý hiệu ứng phụ: useEffect và useLayoutEffect. Tuy chúng có cú pháp giống nhau, nhưng cách chúng hoạt động khác biệt và ảnh hưởng trực tiếp đến trải nghiệm người dùng cũng như hiệu suất của ứng dụng.
Tóm tắt quy trình thực thi
useEffect
- Chạy sau khi React cập nhật DOM xong và render UI xong.
- Thích hợp cho các tác vụ không ảnh hưởng trực tiếp đến layout, như gọi API, đăng ký sự kiện, log, animation nhẹ…
Quy trình:
- Cập nhật lại state
- Cập nhật DOM (mutated)
- React render lại UI
- Clean up nếu có
- Gọi useEffect callback
useLayoutEffect
- Chạy ngay sau khi DOM được cập nhật, nhưng trước khi browser vẽ lại giao diện (paint).
- Dùng khi bạn cần đo lường DOM, thay đổi layout hoặc ngăn nhấp nháy giao diện.
Quy trình:
- Cập nhật lại state
- Cập nhật DOM (mutated)
- Clean up nếu dependencies thay đổi
- Gọi useLayoutEffect callback
- React render lại UI
Khi nào dùng cái nào?
| Tình huống | Nên dùng |
|---|---|
| Gọi API, thao tác không ảnh hưởng layout | useEffect |
| Đo kích thước DOM, scroll, position | useLayoutEffect |
| Cập nhật class, focus vào input | useLayoutEffect |
| Hiệu ứng animation nhẹ sau render | useEffect |
| Ngăn nháy layout (flicker) khi hiển thị components | useLayoutEffect |
| Cập nhật DOM trước khi browser vẽ lại | useLayoutEffect |
