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

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

  useEffect(() => {
  // This code will run when the component mounts or updates

  // Simulate fetching data from an API (for demonstration purposes)
  const fetchData = async () => {
      try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      setData(data);
      } catch (error) {
      console.error('Error fetching data:', error);
      }
  };

  fetchData();

  // The cleanup function
  return () => {
      // This code will run when the component unmounts or updates and the effect is re-run

      // Clean up any resources or subscriptions here
      // For example, if you have an event listener, remove it to avoid memory leaks
      // Remove any timers or intervals that were set up in the effect
      // Clear any other resources that need cleanup

      console.log('Cleaning up...');
  };
  }, []); // The empty dependency array ensures the effect runs only once (on mount) and not on updates

  return (
  <div>
      {data ? (
      <ul>
          {data.map((item) => (
          <li key={item.id}>{item.name}</li>
          ))}
      </ul>
      ) : (
      <p>Loading data...</p>
      )}
  </div>
  );
};

export default MyComponent;