What is the best way to use translation interpolation into JSX on dynamic lists?

[fresonn]

Which option is more performant with dynamic lists?

First with direct call <span>{t('seeAll')}</span>?

const SomeList = () => {
  const { t } = useTranslation()

  return (
    <ul>
      {options.map(({ title }) => (
        <li>
          <p>{t(`titles.${title}`)}</p>
          <span>{t('seeAll')}</span>
        </li>
      ))}
    </ul>
  )
}

Or with a dedicated variable?

const SomeList = () => {
  const { t } = useTranslation()

  const seeAll = t('seeAll')

  return (
    <ul>
      {options.map(({ title }) => (
        <li>
          <p>{t(`titles.${title}`)}</p>
          <span>{seeAll}</span>
        </li>
      ))}
    </ul>
  )
}

I can not understand how best to proceed in the case of SSR? Or is it not important at all at the build stage?