Digamos que tengo un componente:
export const MyComponent = ({largeArray}) => { const arrayINeed = largeArray.sort() } Por lo que entiendo, se llamará a largeArray.sort() cada vez que se vuelva a renderizar MyComponent , si largeArray es enorme, ¿eso no genera cierto grado de problemas de rendimiento?
¿Es mejor en este caso memorizar el resultado así?:
export const MyComponent = ({largeArray}) => { const sortedArray = useMemo(() => largeArray.sort(), [largeArray]) }Sí. También es importante reconocer que está mutando la matriz pasada en props llamando a su método de sort . En su lugar, distribuya la matriz en una nueva matriz y ordene la nueva matriz:
import {useMemo} from 'react'; export const MyComponent = ({largeArray}) => { const sortedArray = useMemo(() => [...largeArray].sort(), [largeArray]); }