What is useEffect?
- React course
- Beginner
- Lesson 65/84
- 4 min
Learn to perform side effects after render with useEffect.
What is useEffect?
To run side effects (effects) while components render, you use useEffect: data fetching, subscriptions, timers, DOM changes. These cannot happen during render.
Form: useEffect(() => { ... }). The function inside runs after render. It is called after every paint, including the first.
Later we will control when it runs with a dependency array; for now we learn the base concept.
Side effects
A side effect is anything outside render: a network request, a timer, a subscription, a DOM change. Doing these inside render confuses React.
useEffect moves them to after render. This keeps render pure; the same input always gives the same output.
This separation makes React predictable.
Practice Title effect
Complete the skeleton. Write a TitlePage component; import useEffect. Call useEffect(() => { document.title = "Page"; });. Return <h1>Content</h1>. Export it.
Starter code
import { useEffect } from "react";
// Define TitlePage hereSample solution
import { useEffect } from "react";
function TitlePage() {
useEffect(() => { document.title = "Page"; });
return <h1>Content</h1>;
}
export default TitlePage;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 When does useEffect run?
The render phase must stay pure.- Only on unmount
- During render
- After render Correct answer
- Never
Explanation: useEffect runs after render.
2 What is useEffect: fill in the missing part
useEffect(() => { ____ })useEffect(() => { document.title = "Hello" })Explanation: You updated the title in the effect.
3 What is useEffect: match the terms
| Term | Meaning |
|---|---|
useEffect |
Effect hook |
fetch |
Data fetching |
setTimeout |
Timer |
document.title |
DOM change |