How to manage component lifecycle methods in functional components with Hooks?

In functional components, you can manage component lifecycle methods using the useEffect hook. The useEffect hook allows you to perform side effects in functional components, such as fetching data, subscribing to events, or updating the document title.

Here is an example of how you can manage component lifecycle methods using Hooks in a functional component:

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // This code will run after the component has rendered for the first time
    fetchData();
    
    // This function will run when the component is unmounted
    return () => {
      // Any cleanup code can go here
    };
  }, []); // The empty array as the second argument means that this effect will only run once after the initial render

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    setData(data);
  };

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

export default MyComponent;

In the above example, we use the useEffect hook to fetch data from an API after the component has rendered for the first time. The useEffect hook takes a function as its first argument, which contains the code that we want to run. We also define a cleanup function in the useEffect hook, which will be called when the component is unmounted.

By using the useEffect hook, you can easily manage component lifecycle methods in functional components with Hooks.