useEffect trong React
useEffect là một Hook trong React, được giới thiệu từ phiên bản 16.8, cho phép bạn thực hiện các side effects trong function components. Các side effects này bao gồm việc fetch data, subscription, hoặc thay đổi trực tiếp DOM.
Tại sao phải dùng useEffect
- Side Effects: Dùng để thực hiện các hành động phụ như gọi API, đăng ký hoặc hủy đăng ký event listeners.
- Tích hợp với Lifecycle: Nó giúp bạn tích hợp với các chu kỳ sống của component như componentDidMount, componentDidUpdate, và componentWillUnmount trong class component.
- Tránh lỗi: Việc sử dụng useEffect giúp bạn quản lý các side effects một cách rõ ràng và tránh các lỗi liên quan đến việc không quản lý đúng thời điểm thực thi các side effects.
Cách sử dụng useEffect
useEffect có thể được sử dụng theo nhiều cách khác nhau tùy thuộc vào việc bạn muốn side effect của mình chạy khi nào. Dưới đây là các cách sử dụng phổ biến:
- Chạy một lần sau khi component render lần đầu:
- Giống với componentDidMount trong class component.
- Chạy sau mỗi lần render:
- Giống với componentDidUpdate trong class component.
- Chạy khi một giá trị cụ thể thay đổi:
- Giống với componentDidUpdate nhưng chỉ theo dõi một hoặc vài giá trị cụ thể.
- Cleanup effect:
- Giống với componentWillUnmount trong class component.
Ví dụ sử dụng useEffect
1. Chạy một lần sau khi component render lần đầu
import React, { useEffect } from 'react';
function App() {
useEffect(() => {
console.log('Component mounted');
// Cleanup function
return () => {
console.log('Component unmounted');
};
}, []); // Chỉ chạy một lần khi component mount
return <div>My Component</div>;
}
export default App;2. Chạy sau mỗi lần render
import React, { useState, useEffect } from 'react';
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('Component rendered or count changed');
}); // Không có dependency array, chạy sau mỗi lần render
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
export default App;3. Chạy khi một giá trị cụ thể thay đổi
import React, { useState, useEffect } from 'react';
function App() {
const [count, setCount] = useState(0);
const [name, setName] = useState('John');
useEffect(() => {
console.log('Count changed:', count);
}, [count]); // Chỉ chạy khi count thay đổi
useEffect(() => {
console.log('Name changed:', name);
}, [name]); // Chỉ chạy khi name thay đổi
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
);
}
export default App;4. Cleanup effect
import React, { useState, useEffect } from 'react';
function App() {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
// Giả sử ta có API để theo dõi trạng thái online
ChatAPI.subscribeToFriendStatus(handleStatusChange);
// Cleanup function
return () => {
ChatAPI.unsubscribeFromFriendStatus(handleStatusChange);
};
});
return (
<div>
<p>{isOnline === null ? 'Loading...' : isOnline ? 'Online' : 'Offline'}</p>
</div>
);
}
export default App;Kết luận
useEffect là một công cụ mạnh mẽ giúp bạn quản lý các side effects trong React function components một cách rõ ràng và dễ dàng. Nó thay thế các phương pháp lifecycle truyền thống trong class component và cung cấp một cách tiếp cận linh hoạt hơn để làm việc với các side effects.