Optimizing React Components With Memoization And Error Handling

/**
       * React component that demonstrates memoization and error handling.
       * 
       * @param {object} props - Component properties
       * @param {function} props.onFetchData - Function to fetch data
       * @returns {JSX.Element} The rendered component
       * @throws {Error} If data fetching fails
       */
      import React, { useState, useEffect, useMemo, useCallback } from 'react';
      
      const MyComponent = ({ onFetchData }) => {
         const [data, setData] = useState(null);
         const [error, setError] = useState(null);
         
         // Memoize the fetch data function to prevent re-renders
         const fetchData = useCallback(async () => {
            try {
               const result = await onFetchData();
               setData(result);
            } catch (error) {
               setError(error.message);
            }
         }, [onFetchData]);
         
         // Use effect to fetch data on mount
         useEffect(() => {
            fetchData();
         }, [fetchData]);
         
         // Memoize the rendered content to prevent unnecessary re-renders
         const content = useMemo(() => {
            if (error) {
               return <div>Error: {error}</div>;
            } else if (data) {
               return <div>Data: {JSON.stringify(data)}</div>;
            } else {
               return <div>Loading...</div>;
            }
         }, [data, error]);
         
         return content;
      };
      
      export default MyComponent;