diff --git a/src/I18nextProvider.js b/src/I18nextProvider.js index 66d0c2be7..d929d1aab 100644 --- a/src/I18nextProvider.js +++ b/src/I18nextProvider.js @@ -1,14 +1,18 @@ -import { createElement } from 'react'; +import { createElement, useMemo } from 'react'; import { I18nContext } from './context'; export function I18nextProvider({ i18n, defaultNS, children }) { + const value = useMemo( + () => ({ + i18n, + defaultNS, + }), + [i18n, defaultNS], + ); return createElement( I18nContext.Provider, { - value: { - i18n, - defaultNS, - }, + value, }, children, ); diff --git a/test/I18nextProvider.spec.js b/test/I18nextProvider.spec.js index 4558072f4..ffa180a1f 100644 --- a/test/I18nextProvider.spec.js +++ b/test/I18nextProvider.spec.js @@ -25,16 +25,16 @@ const instance = { }; describe('I18nextProvider', () => { - function TestComponent() { - const { t, i18n } = useTranslation('translation'); + it('should render correct content', () => { + function TestComponent() { + const { t, i18n } = useTranslation('translation'); - expect(typeof t).toBe('function'); - expect(i18n).toBe(instance); + expect(typeof t).toBe('function'); + expect(i18n).toBe(instance); - return
{t('key1')}
; - } + return
{t('key1')}
; + } - it('should render correct content', () => { const wrapper = mount( @@ -44,4 +44,23 @@ describe('I18nextProvider', () => { // console.log(wrapper.debug()); expect(wrapper.contains(
key1
)).toBe(true); }); + + it('should not rerender if value is not changed', () => { + let count = 0; + const TestComponent = React.memo(function TestComponent() { + const { t } = useTranslation('translation'); + count += 1; + return
{t('key1')}
; + }); + + const wrapper = mount( + + + , + {}, + ); + expect(count).toBe(1); + wrapper.setProps({ i18n: instance }); + expect(count).toBe(1); + }); });