Hook hiệu ứng useEffect trong React

Để làm việc với các hiệu ứng, người ta sử dụng hook useEffect. Hãy cùng xem cách nó hoạt động.

Đầu tiên, hãy import hook của chúng ta:

import { useEffect } from 'react';

Hãy tạo một component App chứa tiêu đề:

function App() {
	return (
		<div>
			<h1>React App</h1>
		</div>
	);
}

export default App;

Giả sử chúng ta cần thực hiện một số hành động sau khi render, ví dụ: thiết lập màu nền cho toàn bộ trang. Trong trường hợp này, hệ thống bên ngoài sẽ là DOM của trình duyệt.

Hãy áp dụng hook của chúng ta:

function App() {
	useEffect(() => {
		document.body.style.backgroundColor = 'green';
	}, []);
	
	...
}

Tham số thứ hai được truyền vào là một mảng phụ thuộc. Nó bao gồm các giá trị được sử dụng bởi các hàm của component. Hiện tại chúng ta để nó trống. Trong trường hợp này, màu sẽ được đặt thành màu xanh lá cây chỉ một lần sau khi render. Không thể bỏ hoàn toàn tham số thứ hai, vì component của bạn có thể rơi vào vòng lặp vô hạn.

Sử dụng hook useEffect để thay đổi tiêu đề (title) của trang.