Các Biến Thể Của Hook useEffect Trong React

Hook useEffect còn có các biến thể khác, chúng rất cụ thể và hiếm khi được sử dụng, vì vậy chúng ta sẽ chỉ điểm qua ngắn gọn.

Biến thể đầu tiên là hook useLayoutEffect, hook này kích hoạt trước khi trình duyệt vẽ lại màn hình. Bạn có thể sử dụng khả năng này để tính toán kích thước và vị trí của component phụ thuộc vào các phần tử khác, để sau đó khi vẽ, trình duyệt sẽ hiển thị nó ngay lập tức ở đúng vị trí cần thiết. Nhờ vào điều này, ví dụ, người dùng sẽ không thấy những bước nhảy trung gian của component khi thay đổi vị trí hoặc kích thước, mà chỉ thấy các phiên bản cuối cùng của chúng.

Biến thể thứ hai là hook useInsertionEffect, hook này kích hoạt trước bất kỳ thay đổi nào của cây DOM, tức là vào lúc khi các refs chưa được gắn và DOM chưa được cập nhật. Nó chủ yếu được áp dụng ở những nơi cần chèn các kiểu động từ các thư viện CSS-in-JS trước khi DOM thay đổi.