Many probably unnecessary renders

Describe the bug After some time working in dev, my app with next-i18next started to get sluggish on page reloads and language changes. I installed ‘why-did-you-update’ to investigate and found loads of seemingly unnecessary rerenders of the same components happening. The additional renders pile up with reloads and language changes and don’t happen again afterwards.

It seems the number of rerenders depend on the number of components using withNamespaces. While it is understandable that a change of language causes a rerender of every connected component, it looks like every time the HOC triggers a render in one connected component, it causes all connected components to render.

Word of warning: It might be that why-did-you-update is not suited to debug server-side rendering.

To Reproduce Steps to reproduce the behaviour:

1. Clone or download this repository.
2. Install why-did-you-update for the example:

cd example
yarn add why-did-you-update

1. Init why-did-you-update in _app.js in /example/pages:

import React from 'react'
import App, {Container} from 'next/app'

if (process.env.NODE_ENV !== 'production') {
  const { whyDidYouUpdate } = require('why-did-you-update');
  whyDidYouUpdate(React);
}
...

1. Run the example: yarn run run-example

Expected behaviour The console in the browser should print (ideally only once)

LoadNamespace(Title)
LoadNamespace(Link)
LoadNamespace(Footer)

Actual behaviour The console in the browser prints the three lines six times. When clicking Change locale it outputs the three lines ten times.

OS (please complete the following information):

• Device: MacBook Pro (15-inch, 2017)
• Browser: Chrome Version 70.0.3538.110

Additional Information –

[jamuhl]

@oMatej the t function is equal until languageChange or any other bound event to trigger a rerender: https://github.com/i18next/react-i18next/blob/v9.x.x/src/NamespacesConsumer.js#L92

[isaachinman]

Also as a general note to everyone - don’t optimise prematurely.