Component Lifecycle
Mounting, updating, unmounting phases, and useEffect equivalents.
Overview
Understanding lifecycle helps manage side effects and resource cleanup.
Key Concepts
- Mounting â Component appears in the DOM
- Updating â State or props change
- Unmounting â Component is removed from DOM
- useEffect â Combines componentDidMount, componentDidUpdate, componentWillUnmount
- useLayoutEffect â Fires synchronously after DOM mutations
Code Examples
function LifecycleDemo({ userId }) {
const [user, setUser] = useState(null);
// componentDidMount + componentDidUpdate(userId)
useEffect(() => {
console.log('Component mounted or userId changed');
fetchUser(userId).then(setUser);
// componentWillUnmount
return () => {
console.log('Cleanup: component will unmount or userId changing');
};
}, [userId]);
// componentDidMount only
useEffect(() => {
console.log('Runs once on mount');
}, []);
// Runs after every render
useEffect(() => {
console.log('Runs on every render');
});
// useLayoutEffect - runs synchronously after DOM updates
useLayoutEffect(() => {
const height = document.body.scrollHeight;
console.log('Layout effect, body height:', height);
});
return <div>{user?.name}</div>;
}
Practice
Convert a class component with lifecycle methods to function components with hooks.