useEffect Basics: Dependencies and Cleanup
Run side effects after render, control when they re-run with the dependency array, and return a cleanup function to avoid memory leaks.
What Is useEffect?
useEffect runs a side effect after React renders. Side effects include: fetching data, subscribing to events, setting up timers, and interacting with external APIs. Effects run after the paint, not during rendering.
Basic Syntax
useEffect(effect, deps?). The effect function runs after every render by default. Provide a dependency array to control when it runs.
import { useEffect } from 'react';
function Component() {
useEffect(() => {
console.log('Ran after every render');
});
}All lessons in this course
- useEffect Basics: Dependencies and Cleanup
- Fetching Data on Mount
- Handling Loading and Error States
- AbortController for Cleanup