Component LifecycleIntermediate
1Question 1 of 1
javascriptHow do functional component lifecycles map to class component lifecycle methods?
Explanation & Concept
• `componentDidMount`: `useEffect(() => { ... }, [])` (runs once on mount). • `componentDidUpdate`: `useEffect(() => { ... }, [dependencies])` (runs on mount and dependency change). • `componentWillUnmount`: The cleanup function returned by `useEffect`. • `getDerivedStateFromError`: Still requires class Error Boundaries or libraries like `react-error-boundary`.
Code Example
javascript
import { useEffect } from "react";
export function LifecycleDemo({ propValue }) {
useEffect(() => {
console.log("Mounted!");
return () => console.log("Unmounting/Cleanup!");
}, []);
useEffect(() => {
console.log("propValue updated to:", propValue);
}, [propValue]);
return <div>Value: {propValue}</div>;
}How It Works & Key Takeaways
`useEffect` unifies mount, update, and unmount concerns by co-locating setup and teardown logic within a single function.
Mock Test · 1 Questions · Optional
Ready for Controlled vs Uncontrolled Components?
Take a quick test to evaluate yourself, or move straight to the next module.
Intermediate1 questions