useLayoutEffectlà một trong những hook của React giúp chúng ta thực hiện các tác vụ layout và DOM một cách đồng bộ, đảm bảo trạng thái giao diện được cập nhật đúng thời điểm. Nó được sử dụng khi chúng ta muốn cập nhật DOM ngay sau khi state hoặc props thay đổi, trước khi giao diện được hiển thị lên màn hình.
hook này tương tự như useEffect, tuy nhiên nó được gọi đồng bộ ngay sau khi React thực hiện cập nhật state hoặc props, trước khi browser thực hiện repaint. Do đó, useLayoutEffect sẽ thường được sử dụng khi chúng ta muốn thay đổi các thuộc tính layout hoặc tính toán kích thước của các phần tử trên trang web.
Cách sử dụng useLayoutEffect trong React Js
import React, { useLayoutEffect } from 'react';
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> MyComponent() {
useLayoutEffect(() => {
// code để cập nhật DOM
}, [dependencies]);
// return JSX
}
Trong đó, dependencies là một mảng chứa các biến phụ thuộc, nếu các biến này thay đổi, useLayoutEffect sẽ được gọi lại. Ở trong hàm callback của useLayoutEffect, chúng ta có thể thực hiện các tác vụ cập nhật trạng thái layout và DOM. Các tác vụ này sẽ được thực hiện đồng bộ, đảm bảo trạng thái giao diện được cập nhật đúng thời điểm và tránh được các lỗi hiển thị trên giao diện.
Lưu ý rằng useLayoutEffect thường được sử dụng khi chúng ta muốn thực hiện các tác vụ layout và DOM ngay sau khi cập nhật state hoặc props của component, trước khi giao diện được hiển thị lên màn hình. Do đó, nếu chúng ta không cần thực hiện các tác vụ này ngay sau khi cập nhật state hoặc props, thì chúng ta nên sử dụng useEffect thay vì useLayoutEffect để giảm thiểu các lỗi hiển thị trên giao diện.
Ví dụ về cách sử dụng useLayoutEffect trong React Js
import React, { <a href="https://nodemy.vn/doi-chut-ve-usestate-trong-react-hooks/">useState</a>, useLayoutEffect } from 'react';
function MyComponent() {
const [height, setHeight] = useState(0);
useLayoutEffect(() => {
setHeight(document.getElementById('myElement').clientHeight);
}, []);
return (
<div>
<div id="myElement"><a href="https://nodemy.vn/hieu-arrow-function-va-this-trong-javascript-tao-ra-nhung-ham-manh-me-voi-cu-phap-ngan-gon-huong-dan-day-du-cho-nguoi-moi-bat-dau-important/">This</a> is my element.</div>
<p>The height of my element is: {height}px.</p>
</div>
Trong ví dụ trên, chúng ta sử dụng useLayoutEffect để cập nhật chiều cao của phần tử có id="myElement". Hàm callback của useLayoutEffect sẽ được gọi đồng bộ sau khi component render xong, nhưng trước khi giao diện được hiển thị lên màn hình.
Trong hàm callback này, chúng ta sử dụng document.getElementById('myElement').clientHeight để lấy chiều cao của phần tử, sau đó cập nhật state bằng setHeight. Khi state thay đổi, React sẽ render lại component và hiển thị chiều cao của phần tử trong thẻ <p>.
Lưu ý rằng trong ví dụ này, chúng ta sử dụng [] để khai báo dependencies, đây là một mảng rỗng nghĩa là hàm callback chỉ được gọi một lần sau khi component render xong. Nếu dependencies không được khai báo hoặc được khai báo một mảng chứa các biến phụ thuộc, hàm callback sẽ được gọi lại mỗi khi các biến này thay đổi.
Kết luận và bài viết có liên quan
Bài viết có liên quan :
Sử dụng useReducer hook trong React
Cách sử dụng toán tử 3 ngôi trong JavaScript
Cách sử dụng boostrap icon và font awesome icon vào trong React Js
DOM HTML trong Javascript, lấy nội dung trong thẻ html
