Cú pháp
useLayoutEffect(callback, [dependency])
Cách sử dụng
<aside> 💡 Sử dụng khi bạn muốn setState cho 1 state nào đó, rồi kiểm tra điều kiện state đó trong useEffect và set lại giá trị của state. Thì nên sử dụng useLayoutEffect.
</aside>
Đặc điểm
Ta so sánh 2 hook để nhận thấy sự khác nhau (về thứ tự thực hiện)
| useEffect | useLayoutEffect |
|---|---|
| 1. Cập nhật lại State |
- Cập nhật DOM (mutated)
- Render lại UI
- Gọi CleanUp nếu dependency thay đổi
- Gọi useEffect callback | 1. Cập nhật lại State
- Cập nhật DOM (mutated)
- Gọi CleanUp nếu dependency thay đổi (sync)
- Gọi useLayoutEffect callback (sync)
- Render lại UI |
Trong đó:
Mutated: Chính là việc update lại thuộc tính (properties) trong DOM, mà chưa render ra giao diện
<aside> 💡 Việc render ra giao diện sẽ để cuối cùng, tránh hiện tượng giao diện bị giật, nháy.
</aside>
<aside> 💡 Hook này hiếm khi được sử dụng
</aside>