Лучший способ установить переведенный заголовок документа (тег HTML) в React с помощью react-i18next

Question

На данный момент я устанавливаю заголовок документа в моем функциональном компоненте следующим образом:

useEffect(() => { document.title = 'My title' }, []);

Я хочу, чтобы мой сайт поддерживал разные языки, поэтому я реализовал react-i18next. У меня есть кнопки для изменения языка, вызывающего функцию ниже. Это немедленно изменяет строки на моей веб-странице.

const changeLanguage = (lng) => {
  i18n.changeLanguage(lng);
}

Изменение кода, упомянутого ранее, на приведенный ниже работает (обратите внимание на функцию t('...')), но только при загрузке страницы. Если я нажимаю кнопки выбора языка, заголовок страницы не обновляется.

useEffect(() => { document.title = t('My title') }, []);

Как я могу этого добиться?

Та же проблема существует со строками, переданными в другие компоненты. Например,

// inside parent
<ChildComponent title={t('My title')} />

// inside child
<h1>{props.title}</h1>

Answer 1

Во-первых. Проблема в том, что с пустым массивом в UseEffect вы говорите React выполнять код только внутри onMount, что означает, что когда вы обновляете свой язык, эта функция запускается, чтобы исправить это, используйте что-то вроде этого

useEffect(() => { document.title = t('My title') }, [lang]);

Вторая проблема, которую я не смог воспроизвести, убедитесь, что если вы измените язык, дочерняя опора будет перерисована, протестируйте с помощью простого console.log('rendered');