title: React Maximum update depth exceeded error caused by useEffect only in test
body: <p>I am trying to write some tests to my react component using jest and react-testing-library.</p>
  <p>My component looks like:</p>
  <pre><code>//DocumentTable.js
  import {useTranslation} from &quot;react-i18next&quot;;
  import ReactTable from &quot;react-table-6&quot;;
  import {connect} from &quot;react-redux&quot;;
  ...
  
  export const DocumentTable = ({documents, getDocuments, ...}) =&gt; {
      const {t} = useTranslation();
      const [data, setData] = useState([])
  
      useEffect(() =&gt; {
          getDocuments();
      }, [])
  
      useEffect(() =&gt; {
          setData(() =&gt; translate(documents.map(doc =&gt; Object.assign({}, doc))))
      }, [documents, t])
  
      const translate = (tempDocuments) =&gt; {
          if (tempDocuments[0]) {
              if (tempDocuments[0].name) {
                  tempDocuments.forEach(doc =&gt; doc.name = t(doc.name));
              }
              if (tempDocuments[0].documentStatus) {
                  tempDocuments.forEach(doc =&gt; doc.documentStatus = t(doc.documentStatus));
              }
          }
          return tempDocuments;
      }
      ...
  
          return (
              &lt;div className=&quot;col m-0 p-0 hidden-overflow-y&quot;&gt;
  
                  &lt;ReactTable
                      className=&quot;bg-dark dark-table&quot;
  
                      data={data}
              ...
              )
  }
  
  ...
  
  export default connect(mapStateToProps, matchDispatchToProps)(DocumentTable);
  </code></pre>
  <p>As you can see I am using redux and translation from react-i18next.
  I am using this component to show values received from prop documents in ReactTable component from react-table-v6. To avoid editing my original value I create deep copy of documents array, translate it and put it into data which is used directly in my table.</p>
  <p>I have started write my test from check if I can render my component properly using react-testing-library:</p>
  <pre><code>//DocumentTable.test.js
  import React from 'react'
  import {render} from '@testing-library/react'
  import {DocumentTable} from &quot;../../../components/content/DocumentTable&quot;;
  import {I18nextProvider} from &quot;react-i18next&quot;;
  import i18n from &quot;../../../i18n&quot;;
  
  it(&quot;Should render component&quot;, () =&gt; {
      const documents = [
          {
              name: &quot;favourite&quot;,
              documentStatus: &quot;new&quot;
  
          },
          {
              name: &quot;simple&quot;,
              documentStatus: &quot;edited&quot;
          }
      ]
  
      render(
          &lt;I18nextProvider i18n={i18n}&gt;
              &lt;DocumentTable documents={documents} getDocuments={jest.fn()}/&gt;
          &lt;/I18nextProvider&gt;
      );
  })
  
  </code></pre>
  <p>and everything seems to work fine. However I want to use mock of useTranslation hook as I did in my other components tests.
  My mock is:</p>
  <pre><code>//_mocks_/react-18next.js
  module.exports = {
      useTranslation: () =&gt; ({
          t: key =&gt; key,
          i18n: {}
      }),
  }
  </code></pre>
  <p>To use it I have added property to jest config:</p>
  <pre><code>//package.json
    &quot;jest&quot;: {
      &quot;moduleNameMapper&quot;: {
        &quot;react-i18next&quot;: &quot;&lt;rootDir&gt;/src/tests/_mocks_/react-i18next.js&quot;
      }
    },
  </code></pre>
  <p>and I have simplified my test:</p>
  <pre><code>//DocumentTable.test.js
  import React from 'react'
  import {render} from '@testing-library/react'
  import {DocumentTable} from &quot;../../../components/content/DocumentTable&quot;;
  
  it(&quot;Should render component&quot;, () =&gt; {
      const documents = [
          {
              name: &quot;favourite&quot;,
              documentStatus: &quot;new&quot;
  
          },
          {
              name: &quot;simple&quot;,
              documentStatus: &quot;edited&quot;
          }
      ]
  
      render(
            &lt;DocumentTable documents={documents} getDocuments={jest.fn()}/&gt;
      );
  })
  </code></pre>
  <p>and now when I run my test I get following error:</p>
  <pre><code>Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
          in DocumentTable (at DocumentTable.test.js:89)
  </code></pre>
  <p>And I dont understand whats going on. I have come to conclusion that problem is caused by my useEffect hook in DocumentTable.js file. When I don't create copy of my props but translate it directly:</p>
  <pre><code>useEffect(() =&gt; {
      setData(() =&gt; translate(documents))
  }, [documents, t])
  </code></pre>
  <p>everything again works fine. But I must stay with creating copy of it(when user change language I want to translate again original documents).
  How can I deal with that?
  Thanks in advance.</p>