React: performance of rendering a list as hard-coded vs a loop

Question

Say I'm building a nav component which has 3 static links. Is there a difference in terms of performance between hard-coding the links or looping over an array? I would assume that, while the latter is cleaner code (less duplication), the former is cheaper in terms of processing.

Hard-coded:

const Nav = () => (
  <ul>
    <li>First link</li>
    <li>Second link</li>
    <li>Third link</li>
  </ul>
)

Loop:

const LINKS = [
  'First link',
  'Second link',
  'Third link'
]

const Nav = () => (
  <ul>
    {
      LINKS.map(link => <li key={link}>{link}</li>)
    }
  </ul>
)

This is a simple example but I'm also curious about how more complex structures would be affected (eg: a complete website rendered based on a config file).

Answer 1

Is there a difference?

• Yes, hardcoded is faster. (just executing the already-parsed JSX instead of dynamic construction of the JSX and then execute)

Is that difference noticeable? Probably not unless:

1. You have many many elements (thousands?) created from that config

2. This is a component re-rendering very very often

3. If the process breaks some memoization (for example by making some memoized component prop have a different value each time, instead of the same value) which would cause a lot more re-rendering of child components

Best way is profile / measure the actual difference