useEffect
useEffect
- What is useEffect ?
Agenda
What is useEffect ?
1. Each Render Has Its Own Props and States
What is useEffect ?
It should be...
function Counter() {
const count = 0;
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}What is useEffect ?
It should be...
The count var we get from useState() is 0.
When we call setCount, React calls our component again. This time, count will be 1.
function Counter() {
const count = 1;
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}What is useEffect ?
function Counter() {
const [count, setCount] = useState(0);
function handleAlertClick() {
setTimeout(() => {
alert("You clicked on: " + count);
}, 3000);
}
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
<button onClikc={handleAlertClick}>
Show alert
</button>
</div>
);
}1. Increment the counter *3
2. Press Show alert
3. Increment it to 5
What is useEffect ?
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`
})
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
<button onClikc={handleAlertClick}>
Show alert
</button>
</div>
);
}Each Render Has Its Own Effects
What is useEffect ?
// During first render
function Counter() {
// ...
useEffect(
// Effect function from first render
() => {
document.title = `You clicked ${0} times`;
}
);
// ...
}
// After a click, our function is called again
function Counter() {
// ...
useEffect(
// Effect function from second render
() => {
document.title = `You clicked ${1} times`;
}
);
// ...
}Each Render Has Its Own Effects
What is useEffect ?
We can imagine effects are a part of the result
- React : Give me the UI when the state is 0
- Counter Component
- Here's the render result: You click 0 times
- Also remember to run this effect after you're done: () => { document.title = 'You clicked 0 times' }
- React : Sure. Updating the UI. Hey browser, I'm adding some shit to the DOM
- Browser : Cool, I painted it to the screen
- React : OK, now I'm going to run the effect you gave me
What is useEffect ?
Class Component...
componentDidUpdate() {
setTimeout(() => {
conosle.log(`You clicked ${this.state.count} times`)
},3000)
}What is useEffect ?
Functional Component...
function Example() {
const [count, setCount] = useState(0);
const latestCount = useRef(count);
useEffect(() => {
// Set the mutable latest value
latestCount.current = count;
setTimeout(() => {
// Read the mutable latest value
console.log(`You clicked ${latestCount.current} times`);
}, 3000);
});What is useEffect ?
- React render UI for {id : 20}
- The browser paints. We see the UI for {id : 20}
- React cleans up the effect for {id :10 }
- React runs the effect for {id : 20}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.id, handleStatusChange);
};
});// First render, props are {id: 10}
function Example() {
// ...
useEffect(
// Effect from first render
() => {
ChatAPI.subscribeToFriendStatus(10, handleStatusChange);
// Cleanup for effect from first render
return () => {
ChatAPI.unsubscribeFromFriendStatus(10, handleStatusChange);
};
}
);
// ...
}
// Next render, props are {id: 20}
function Example() {
// ...
useEffect(
// Effect from second render
() => {
ChatAPI.subscribeToFriendStatus(20, handleStatusChange);
// Cleanup for effect from second render
return () => {
ChatAPI.unsubscribeFromFriendStatus(20, handleStatusChange);
};
}
);
// ...
}# PRESENTING CODE
clean Up
What is useEffect ?
Synchronization, Not LifeCycle...
useEffect
By seanhsieh
