Tự học ReactJS: Sử dụng useLayoutEffect khi nào?

Trong React, chúng ta có 2 cách để chạy các side-effect là:

1. useEffect
2. useLayoutEffect

Sự khác nhau giữa hai thằng này không lớn lắm, và 99% thời gian chúng ta chỉ cần sử dụng useEffect là có thể giải quyết định các side-effect. Nhưng trong một số trường hợp useLayoutEffect vẫn rất hữu ích.

Xem chi tiết sự khác nhau giữa hai thằng này tại bài viết của Kent C.Dodds. Hay tham khảo chi tiết react hooks flow

Vậy useLayoutEffect được sử dụng khi nào? Hay khác hơn là tại sao phải sử dụng useLayoutEffect? Sau đây là một demo, khi bạn click vào nút “add message” thì scroll sẽ bị delay khoảng 1s đúng không? Điều chúng ta muốn ở đây là khi thêm một message thì scroll sẽ chạy mượt mà hơn, không còn hiện tượng bị delay hay giựt giựt nữa.

React.useEffect(() => {
    containerRef.current.scrollTop = containerRef.current.scrollHeight
})

Chúng ta có thể sử dụng useLayoutEffect để tránh được hiện tượng này:

React.useLayoutEffect(() => {
    containerRef.current.scrollTop = containerRef.current.scrollHeight
})

Kết quả sau khi sử dụng useLayoutEffect bạn có thể tham khảo tại đây.

useLayoutEffect sẽ chạy trước khi DOM được vẽ lên màn hình cho nên nó có thể can thiệp sớm và set scrollTop, dẫn tới scroll được mượt mà hơn. Bạn có thể nhận thấy điều đó trong diagram sau:

thaunguyen.com via Epic React by Kent C.Dodds