title: How can I use a React context variable when initiating i18next interpolation?
body: <p>The React app I'm working on is using <code>react-18next</code>. Inside the <code>index.js</code> file, there is a <code>i18n.js</code> file imported into it that configures and initiates <code>i18n</code>.</p>
  <p>This includes <code>interpolation</code> configuration where we have some various formats for strings and numbers.</p>
  <p><strong>i18n.js</strong></p>
  <pre><code>import i18n from 'i18next';
  
  i18n.init({
    interpolation: {
      escapeValue: false,
      format: (value, format) =&gt; {
  
        if(format === 'currency') {
          return return new Intl.NumberFormat('en-Us', {
            maximumFractionDigits: decimals,
            style: 'currency',
            currency: 'USD',
          }).format(value);
        } 
      }
    }
  });
  </code></pre>
  <p>I have a React context variable <code>currency</code> that I'd like to use in this <code>interpolation</code> function to replace &quot;USD.&quot; How can I do that?</p>
  <p>In order to access the context variable, I need to use the <code>useContext()</code> hook, which is unavailable inside this <code>i18n.js</code> file, as it needs to be called inside a React component.</p>
  <p>The context variable changes, based on someone using a <code>&lt;select&gt;</code> input, so I would think the <code>interpolation</code> function would need to be re-instantiated each time the variable changes.</p>
  <p>I tried moving <code>i18n.init()</code> into a custom hook and calling that hook from my <code>App.js</code> component.</p>
  <p><strong>useI18n.js</strong></p>
  <pre><code>import React, { useContext, useEffect } from 'react';
  import i18n from 'i18next';
  
  import { ContextCurrency } from 'context';
  
  const useI18n = () =&gt; {
    const { currency } = useContext(ContextCurrency);
  
    // init i18n when currency changes
    useEffect(() =&gt; {
      i18n.init(...);
    }, [currency]);
  
    return i18n;
  }
  
  export default useI18n;
  </code></pre>
  <p>This resulted in an error:</p>
  <blockquote>
  <p>Warning: React has detected a change in the order of Hooks called by App.
  Uncaught TypeError: Cannot read properties of undefined (reading 'length')</p>
  </blockquote>
  <p>The error is a check being made in React's <code>areHookInputsEqual</code> function. I'm not exactly sure why the error is being thrown but I know it has something to do with the hook I made. Besides, re-initiating <code>1i18n</code> each time <code>currency</code> changes doesn't seem right.</p>
  <p>Note: I am aware that I can instantiate the context variable <em>in each component</em> that makes use of the interpolation and pass it as an option to <code>interpolation.format()</code>, but that's what I'm trying to avoid. Ideally there would be a way to access this context variable <em>in one single place</em> rather than on a per-translation basis.</p>