Summary - useEffect
- React course
- Beginner
- Lesson 68/84
- 5 min
Write a hook that listens to window resize.
Summary - useEffect
In this group you learned useEffect. It moves side effects to after render; it runs after every paint, including the first.
The dependency array tells when it runs: [] first render, [deps] on change, none every render. A cleanup function releases resources.
Correct dependencies and cleanup are the key to healthy effects.
Practice useEffect summary task
Complete the skeleton. Write a Logger component; import useState and useEffect. Define const [n, setN] = useState(0);. Call useEffect(() => { console.log(n); }, [n]);. Return <button onClick={() => setN(n + 1)}>{n}</button>. Export it.
Starter code
import { useState, useEffect } from "react";
// Define Logger hereSample solution
import { useState, useEffect } from "react";
function Logger() {
const [n, setN] = useState(0);
useEffect(() => { console.log(n); }, [n]);
return <button onClick={() => setN(n + 1)}>{n}</button>;
}
export default Logger;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which is wrong?
Cleanup prevents leaks.- useEffect runs after render
- cleanup is never needed Correct answer
- [count] runs when count changes
- [] means first render
Explanation: Cleanup is required if a resource was started.
2 Summary - useEffect: match the terms
| Term | Meaning |
|---|---|
useEffect |
Effect hook |
[] |
First render |
[deps] |
On change |
return () => ... |
Cleanup |