title: useHistory hook inside useEffect create infinite loop in jest tests
body: <p>I'm very annoyed since the morning cause I can't test my custom hooks without this infinite loop.</p>
  <p>My custom hook look like :</p>
  <p><strong>useGetObj1.tsx</strong></p>
  <pre><code>export function useGetObj1(): [
    { obj1: IObj1 | null; obj2: IObj2 | null } | null,
    Function
  ] {
    const User = useSelector((state: IStoreState) =&gt; state.User);
    const history: History = useHistory();
    const resState = useState&lt;{ obj1: IObj1 | null; obj2: IObj2 | null } | null&gt;(null);
    const setState = resState[1];
    useEffect(() =&gt; {
      async function setStateValue() {
        let tmp = null;
        const res = await ParseVerifObj1(User, history.location.pathname);
        if (typeof res !== &quot;number&quot;) {
          res
            ? (tmp = {
                obj1: res.obj1,
                obj2: res.obj2,
              })
            : (tmp = { obj1: null, obj2: null });
          setState(tmp);
        } else if (res === -1) history.push(&quot;/HomePage&quot;);
      }
      setStateValue();
    }, [history.location.pathname, User, setState]);
    return resState;
  }
  </code></pre>
  <p>My test looks like :</p>
  <p><strong>useGetObj1.spec.js</strong></p>
  <pre><code>jest.mock(&quot;axios&quot;);
  jest.mock(&quot;react-router-dom&quot;, () =&gt; ({
    useHistory: () =&gt; ({
      push: jest.fn(),
      location: {
        pathname: &quot;/path/web&quot;,
      },
    }),
  }));
  
  // make setup-jest file and put it later
  import &quot;axios&quot;;
  import &quot;babel-polyfill&quot;;
  //
  import React from &quot;react&quot;;
  import { mount } from &quot;enzyme&quot;;
  import { Provider } from &quot;react-redux&quot;;
  // import ParseVerifObj1 to mock it
  import * as ParseVerifObj1 from &quot;../path&quot;;
  // custom hook tested here
  import { useGetObj1 } from &quot;../path&quot;;
  import configureStore from &quot;redux-mock-store&quot;;
  // act to handle the Promise and the re-render of the renderHook
  import { act } from &quot;react-dom/test-utils&quot;;
  // Utils Initial store
  import { initialStore } from &quot;../path&quot;;
  import routeData from &quot;react-router&quot;;
  
  const mockStore = configureStore();
  
  const mockLocation = {
    pathname: &quot;/&quot;,
    hash: &quot;&quot;,
    search: &quot;&quot;,
    state: &quot;&quot;,
  };
  jest.spyOn(routeData, &quot;useLocation&quot;).mockReturnValue(mockLocation);
  
  describe(&quot;useGetObj1.spec.js&quot;, () =&gt; {
    let store;
    beforeEach(() =&gt; {
      store = mockStore(initialStore);
      jest.clearAllMocks();
    });
  
    let results;
    let wrapper;
    const renderHook = (hook) =&gt; {
      function HookWrapper() {
        results = hook();
        return null;
      }
      wrapper = mount(
        &lt;Provider store={store}&gt;
          &lt;HookWrapper /&gt;
        &lt;/Provider&gt;
      );
      return results;
    };
  
    describe(&quot;Testing the custom hook : useGetObj1&quot;, () =&gt; {
      it(&quot;useGetLesson is ran&quot;, async () =&gt; {
        await act(async () =&gt; renderHook(useGetObj1));
        expect(wrapper).toBeTruthy();
      });
  
      it(&quot;Testing the output adress values get from the ParseVerifObj1 function&quot;, async () =&gt; {
        const spy = jest.spyOn(ParseVerifObj1, &quot;ParseVerifObj1&quot;);
        const lesson = Symbol(&quot;Obj1&quot;);
        const session = Symbol(&quot;Obj2&quot;);
        spy.mockReturnValue({
          Obj1,
          Obj2,
        });
        await act(async () =&gt; renderHook(useGetObj1));
        expect(spy).toHaveBeenCalledWith(
          initialStore.User,
          &quot;/path/web&quot;
        );
        expect(spy).toHaveBeenCalled();
        expect(results[0].Obj1).toBe(Obj1);
        expect(results[0].Obj2).toBe(Obj2);
        expect(results[1]).toBeInstanceOf(Function);
      });
  </code></pre>
  <p>I know it's not a good thing to put history in the useEffect's dependencies but I got a warning like</p>
  <blockquote>
  <p>Line 39:6:  React Hook useEffect has a missing dependency: 'history'. Either includes it or remove the dependency array
  and I tried a lot of different implementation but no one fixed the problem and compile without a warning</p>
  </blockquote>
  <p>thx for helping :)</p>
  <hr />
  <p>_<strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong>Solution</strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></p>
  <hr />
  <p>The solution for me was to use useRef to avoid the dependencies requirement like this :</p>
  <pre><code>const history: History = useRef(useHistory());
  </code></pre>
  <p>with the ref you do not need anymore to put it as a dependency</p>