Optimizing Sort Performance with useMemo Hook

Illustrate using the useMemo hook to memoize sorted data, preventing unnecessary re-renders and optimizing performance in React TanStack Table.
import { useMemo } from 'react';
First, import the useMemo hook from React.
const sortedData = useMemo(() => {
  return originalData.sort((a, b) => {
    // Comparison logic here
    return a.value - b.value;
}, [originalData]);
Use the useMemo hook to memoize the sorted data. The sorting function is defined inside useMemo and will only re-execute when originalData changes. This prevents unnecessary re-renders and optimizes performance.
const tableInstance = useReactTable({
  data: sortedData,
  // other table options
Finally, use the memoized sortedData for your table instance with TanStack Table. This ensures that the table only re-renders when the data actually changes.