import React, { useMemo } from 'react';

function ParentComponent({ items }) {
  const sortedItems = useMemo(() => {
    console.log('مرتب‌سازی در حال انجام است...');
    return items.sort((a, b) => a.localeCompare(b));
  }, [items]);

  return (
    <div>
      <ChildComponent items={sortedItems} />
    </div>
  );
}

function ChildComponent({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}