Có lẽ các bạn cũng từng nghe đâu đó trong React Hook có tên là useLayoutEffect. Và một số nơi trong các bài đọc và tìm kiếm, nó có thể nói rằng nó hoạt động giống như React useEffect nhưng chỉ sử dụng nó khi thực hiện đột biến DOM.

Cách useLayoutEffect hoạt động

Hook React useLayouEffect được viết giống như useEffect và gần như hoạt động theo cùng một cách.
Một trong những điểm khác biệt chính là nó được thực thi ngay sau lifecycle render và trước useEffect được triggered. Tôi có đoạn code như sau:

import {useEffect, useLayoutEffect} from 'react'
export default function App() {
  useEffect(() => {
    console.log('useEffect')
  }, []);
  useLayoutEffect(() => {
    console.log('useLayoutEffect');
  }, []);
  console.log('render lifecycle')
  return (
    <div className="App">
    
    </div>
  );
}

Kết quả:

render lifecycle
useLayoutEffect
useEffect

Nếu chúng ta nhìn vào kết quả ở trên, chúng ta có thể thấy rằng bất kỳ thứ gì trong câu lệnh trả về đều được thực thi đầu tiên, hay còn gọi là render cycle
Hook tiếp theo được thực thi là hook useLayoutEffect, ngay sau đó là hook useEffect.

Câu hỏi thực sự là, tại sao chúng ta nên sử dụng khi nó gần như giống nhau?

useLayoutEffect giống hệt với useEffect, nhưng điểm khác biệt chính của nó là nó được triggered đồng bộ sau tất cả các đột biến DOM.

Nó giúp tối ưu hoá, giúp developer thực hiện các thay đổi trực tiếp với DOM trước khi màn hình UI được cập nhật.

Cả hai useLayoutEffect và useEffect đều có thể được sử dụng để làm những việc cơ bản giống nhau, nhưng chúng có các trường hợp sử dụng hơi khác nhau. Vì vậy, bạn nên cân nhắc khi quyết định sử dụng React Hook nào.

Khác nhau giữa useEffect và useLayoutEffect

useEffect

useEffect chạy bất đồng bộ và sau khi màn hình UI được cập nhật.

Nó sẽ chạy theo trình tự như sau:

1. Bạn gây ra một render nào đó ( ví dụ như thay đổi state, re-render từ component cha )
2. Render component
3. Màn hình UI được cập nhật
4. useEffect chạy

useLayoutEffect

useLayoutEffect chạy đồng bộ sau khi render nhưng trước khi màn hình UI được cập nhật.

Nó sẽ chạy theo trình tự sau:

1. Bạn gây ra một render nào đó ( ví dụ như thay đổi state, re-render từ component cha )
2. Render component
3. useLayoutEffect chạy, và React sẽ đợi đến khi nó chạy hoàn thành
4. Màn hình UI được cập nhật

Bạn nên sử dụng useEffect hay useLayoutEffect

Hầu hết, useEffect là sự lựa chọn phù hợp. Nếu mã của bạn gây ra hiện tượng nhấp nháy, hãy chuyển sang useLayoutEffect nó có thể giúp bạn giải quyết vấn đề này.
Bởi vì useLayoutEffect chạy đồng bộ, ứng dụng sẽ không cập nhật trực quan cho đến khi hiệu ứng của bạn chạy xong .Nó có thể là nguyên nhân xảy ra vấn đề về performance nếu bạn có những đoạn code xử lý chậm trong effect.

Kết luận

Hy vọng qua bài viết này giúp các bạn xây dựng các ứng dụng hiệu quả và sử dụng Hook mong muốn. Cảm ơn các bạn đã đọc và mong rằng nó sẽ hữu ích với bạn

Link tham khảo:
https://daveceddia.com/useeffect-vs-uselayouteffect/