Side Effect
Các sự thay đổi xảy ra không cùng lúc với quá trình render, chẳng hạn như khởi chạy animation hay lấy dữ liệu, thì được gọi là các side effect.
Event Handlers
Các event handler không nhất thiết phải là pure function (xem thêm Keeping Components Pure) vì chúng không được chạy khi component đang được render và do đó nó thường được dùng để xử lý các side effect.
Xét ví dụ sau:
function App() {
const [count, setCount] = useState(0)
async function asyncIncrease() {
setTimeout(() => {
setCount((count) => count + 1)
}, 3000)
}
return (
<>
<p>{count}</p>
<button onClick={asyncIncrease}>Increase</button>
</>
)
}Có thể thấy, hàm asyncIncrease chỉ được thực thi khi người dùng bấm vào nút “Increase”. Hàm này gọi sử dụng hàm setTimeout, là một hàm bất đồng bộ. Sau ba giây, biến count mới được tăng lên và đây chính là một side effect.
Effect
Trong React, effect là các side effect xảy ra bởi quá trình render thay vì bởi các sự kiện. Ví dụ, gửi một tin nhắn là một sự kiện còn việc thiết lập kết nối đến chat server lại là một effect vì nó sẽ luôn xảy ra bất cứ khi nào component được render.
Các effect sẽ được chạy sau khi React cập nhật DOM (sau các lần render).
Để xử lý effect ở trong React, ta sẽ cần sử dụng hook useEffect.