Component Lifecycle

Every React component goes through a lifecycle of events from its creation to its destruction. Understanding this lifecycle is key to managing side effects, optimizing performance, and controlling component behavior. The lifecycle can be broken down into three main phases: Mounting, Updating, and Unmounting. Mounting is when an instance of a component is being created and inserted into the DOM. This happens only once. Updating is when a component is re-rendered as a result of changes to its props or state. This can happen multiple times. Unmounting is when a component is being removed from the DOM. This also happens only once. In the past, with class-based components, you would use special lifecycle methods like `componentDidMount()`, `componentDidUpdate()`, and `componentWillUnmount()` to run code at these specific points. With modern functional components and hooks, the `useEffect` hook can handle all these use cases. To replicate `componentDidMount`, you use `useEffect` with an empty dependency array (`[]`). This tells React to run the effect function only once, after the initial render. To replicate `componentDidUpdate`, you can use `useEffect` with dependencies in its array. The effect will run after the initial render and then again anytime one of those dependencies changes. To replicate `componentWillUnmount`, you return a 'cleanup' function from your `useEffect`. This cleanup function will be executed right before the component is removed from the DOM, making it the perfect place to clean up subscriptions or timers.