useEffect Hook
-
This lesson introduces the useEffect Hook and explains how to manage side effects in React functional components.
The useEffect hook is used to handle side effects.
What is useEffect?
useEffect runs code:
After rendering
When dependencies change
Syntax:
useEffect(() => {
// side effect
}, []);
Side Effects in React
Side effects include:
API calls
Timers
DOM updates
Event listeners
useEffect replaces lifecycle methods.
Dependency Array
The dependency array controls when useEffect runs.
Examples:
Runs once
useEffect(() => {}, []);- Runs when count changes
useEffect(() => {}, [count]);Runs on every render
useEffect(() => {});Cleanup Function
Cleanup functions remove side effects.
Example:
useEffect(() => {
const timer = setInterval(() => {}, 1000);
return () => {
clearInterval(timer);
};
}, []);
Prevents memory leaks.
Final Summary
Hooks enable state in functional components
Rules of Hooks must be followed
useState manages state
useEffect handles side effects
Dependency array controls effect behavior