javascript - Is react useMemo more performant than module level variable?

Question

I need to hard-code some data (no need to change) for a react component, just wondering how i can do it in the most performant way. By performant, i mean fast execution as well as minimum usage of system resource. Two ways I have:

// Way 1. define data outside the component
const data = ['test1', 'test2', 'test3', 'test4', 'test5'...'test1000']

export default function TestComponent() {
  return <>{data.map(item => <p>{item}</p>)}</>
}

// Way 2. define data inside the component with useMemo
export default function TestComponent() {
  const data = useMemo(() => ['test1', 'test2', 'test3', 'test4', 'test5'...'test1000'], [])
  return <>{data.map(item => <p>{item}</p>)}</>
}

Just want some advice on which of the above (or even other ways) is more performant. Thanks!

question from:https://stackoverflow.com/questions/65838224/is-react-usememo-more-performant-than-module-level-variable

Answer 1

The most performant approach will be to not do any computation inside the component - just return the same constant value every time:

const data = ['test1', 'test2', 'test3', 'test4', 'test5'...'test1000']
const result = <>{data.map(item => <p>{item}</p>)}</>
export default function TestComponent() {
  return result
}