Does it make sense to memoize large array operations in React?

Question

Let's say I have a component:

export const MyComponent = ({largeArray}) => {
    const arrayINeed = largeArray.sort()
}

From what I understand, largeArray.sort() will be called every time MyComponent re-renders, if largeArray is huge, doesn't that raise some degree of performance concerns?

Is it better in this case to memoize the result like this?:

export const MyComponent = ({largeArray}) => {
    const sortedArray = useMemo(() => largeArray.sort(), [largeArray])
}

Answer 1

Yes, but more importantly, you are mutating the array passed in props by calling its sort method. Instead, spread the array into a new array and sort the new array:

import {useMemo} from 'react';

export const MyComponent = ({largeArray}) => {
  const sortedArray = useMemo(() => [...largeArray].sort(), [largeArray]);
}