How do React hooks replace class lifecycle methods?

React hooks provide a way to use state and lifecycle features in functional components, effectively replacing the need for class components and their lifecycle methods. The primary hook for managing side effects and lifecycle behaviors is the `useEffect` hook. Here’s how `useEffect` corresponds to the class lifecycle methods: 1. **`componentDidMount`**: To run some code only once after the component mounts, you use `useEffect` with an empty dependency array: ```jsx useEffect(() => { // Code here runs once after the component mounts }, []); ``` The empty array `[]` tells React to run the effect only once, mimicking `componentDidMount`. 2. **`componentDidUpdate`**: To run side effects after the component updates (based on specific state or props changes), you include those dependencies in the array: ```jsx useEffect(() => { // Code here runs after the component updates when 'someValue' changes }, [someValue]); ``` This setup runs the effect whenever `someValue` changes, similar to `componentDidUpdate` for particular props or state. 3. **`componentWillUnmount`**: Cleanup logic (like removing event listeners or canceling timers) is handled by returning a cleanup function from inside `useEffect`: ```jsx useEffect(() => { // Setup code here return () => { // Cleanup code here runs when the component unmounts }; }, []); ``` The cleanup function runs before the component unmounts, equivalent to `componentWillUnmount`. In summary, `useEffect` is a versatile hook that combines the capabilities of `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` depending on how you use its dependency array and cleanup function. This flexibility is a key reason why hooks have become the standard for managing side effects and lifecycle events in React functional components.