React Effects and useEffect
Effects
We can perform data fetching, subscribing, and manually changing DOM from React components. In React, we call these operation ‘side-effects’ or ‘effects’ in short. And we have to use useEffect to perform these side-effects.
useEffect
Component below sets the title after React updates the DOM. You can see the title is updated after the component is mounted.
import React, { useEffect, useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
})
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count+1)}>
Click here
</button>
</div>
)
}You can “clean up” effects after running them.
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
})You can also use useEffect multiple times in a component.
function FriendStatusWithCounter(props) {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
// ...
}You can organize your code by using useEffect. If you do not use hooks, you have to split your code into multiple functions.