useEffect Hook Basics
The useEffect
hook lets you run side effects in function components. It replaces lifecycle methods like componentDidMount
and componentDidUpdate
.
import { useEffect, useState } from "react";
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Count: ${count}`;
});
return <button onClick={() => setCount(count + 1)}>Click {count}</button>;
}
- Runs after every render by default.
- Common for API calls, DOM updates, timers, etc.