title: How does React i18next affect rendering performance?
body: <p>How will <a href="https://www.i18next.com/" rel="nofollow noreferrer">i18next</a> affect rendring in React performance wise? And further, what about its interpolation mechanism vs the way react renders dynamic variables?</p>
  
  <h3>Given the following</h3>
  
  <p><strong>/locales/{language}/common.json</strong>:</p>
  
  <pre><code>{
      "hello-world": "Hello, World",
      "interpolated": "Hello, {{ name }}"
  }
  </code></pre>
  
  <p><strong>Example with i18next</strong></p>
  
  <pre><code>// Import i18n config and translate function
  const Example = function(ownProps) {
    { t } = ownProps; 
    return (
      &lt;div&gt;
        &lt;h1&gt;{ t('interpolated', { name: "World" }) }&lt;/h1&gt;
        &lt;h1&gt;{ t('hello-world') }&lt;/h1&gt;
      &lt;/div&gt;
    );
  };
  
  export default translate('common', { i18n })(Example);
  </code></pre>
  
  <p><strong>Example without i18next</strong></p>
  
  <pre><code>const Example = function() {
    let name = "World";
    return (
      &lt;div&gt;
        &lt;h1&gt;Hello, World&lt;/h1&gt;
        &lt;h1&gt;Hello, { name }&lt;/h1&gt;
      &lt;/div&gt;
    );
  };
  
  export default Example;
  </code></pre>
  
  <p>How much difference for the lookups:</p>
  
  <ul>
  <li><code>t('interpolated', { name: "World" })</code> vs <code>Hello, { name }</code></li>
  <li><code>t('hello-world')</code> vs <code>Hello, World</code></li>
  </ul>