UseEffect vs useLayoutEffect

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.