fix(frontend): improve performance by caching translated texts

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/src/hooks/common/use-note-title.ts

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { useApplicationState } from './use-application-state'
+import { useTranslatedText } from './use-translated-text'
 import { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
 
 /**
  * Retrieves the title of the note or a placeholder text, if no title is set.
@@ -13,8 +13,7 @@ import { useTranslation } from 'react-i18next'
  * @return The title of the note
  */
 export const useNoteTitle = (): string => {
-  const { t } = useTranslation()
-  const untitledNote = useMemo(() => t('editor.untitledNote'), [t])
+  const untitledNote = useTranslatedText('editor.untitledNote')
   const noteTitle = useApplicationState((state) => state.noteDetails.title)
 
   return useMemo(() => (noteTitle === '' ? untitledNote : noteTitle), [noteTitle, untitledNote])

frontend/src/hooks/common/use-translated-text.ts

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import type { TOptions } from 'i18next'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+/**
+ * Translates text and caches it.
+ *
+ * @param key The translation key
+ * @param tOptions Optional translation options
+ * @return the translated text
+ */
+export const useTranslatedText = (key: string, tOptions?: TOptions): string => {
+  const { t } = useTranslation()
+  return useMemo(() => (tOptions ? t(key, tOptions) : t(key)), [key, tOptions, t])
+}

frontend/src/hooks/common/useTranslatedText.spec.ts

@@ -0,0 +1,42 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useTranslatedText } from './use-translated-text'
+import { renderHook } from '@testing-library/react'
+import type { Namespace } from 'i18next'
+import * as ReactI18NextModule from 'react-i18next'
+import type { UseTranslationResponse } from 'react-i18next'
+import { Mock } from 'ts-mockery'
+
+jest.mock('react-i18next')
+
+describe('useTranslatedText', () => {
+  const mockTranslation = 'mockTranslation'
+  const mockKey = 'mockKey'
+  let translateFunction: jest.Mock
+
+  beforeEach(() => {
+    translateFunction = jest.fn(() => mockTranslation)
+    const useTranslateMock = Mock.of<UseTranslationResponse<Namespace, unknown>>({
+      t: translateFunction
+    })
+    jest.spyOn(ReactI18NextModule, 'useTranslation').mockReturnValue(useTranslateMock)
+  })
+
+  it('translates text', () => {
+    const { result } = renderHook(() => useTranslatedText(mockKey))
+
+    expect(result.current).toBe(mockTranslation)
+    expect(translateFunction).toBeCalledWith(mockKey)
+  })
+
+  it('translates text with options', () => {
+    const mockOptions = {}
+    const { result } = renderHook(() => useTranslatedText(mockKey, mockOptions))
+
+    expect(result.current).toBe(mockTranslation)
+    expect(translateFunction).toBeCalledWith(mockKey, mockOptions)
+  })
+})