Cú pháp
useLayoutEffect(callback, [dependency])
Cách sử dụng
💡 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.
Đặ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 2. Cập nhật DOM (mutated) 3. Render lại UI 4. Gọi CleanUp nếu dependency thay đổi 5. Gọi useEffect callback | 1. Cập nhật lại State 2. Cập nhật DOM (mutated) 3. Gọi CleanUp nếu dependency thay đổi (sync) 4. Gọi useLayoutEffect callback (sync) 5. 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
💡 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.
💡 Hook này hiếm khi được sử dụng