title: Problem using useDispatch Hook - Warning: React has detected a change in the order of Hooks
body: <p>This is my first time using Redux Hooks in react.-native, but I am having trouble in my test because when I run the test i get this Warning:</p>
  
  <blockquote>
    <p>Warning: React has detected a change in the order of Hooks called by
    WarrantiesHomeButton. This will lead to bugs and errors if not fixed.
    For more information, read the Rules of Hooks:</p>
  
  <pre><code>   Previous render            Next render
     ------------------------------------------------------
  1. useState                   useContext
     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  </code></pre>
  </blockquote>
  
  <p>I am not sure if the problem is my code or the way I am testing i, the application is running fine. If I run each test independently , the test pass without Warning, if I run all three tests, the last test throw the warning and error.</p>
  
  <p>I would appreciate if you guys could point me to the right direction where I am making a mistake.</p>
  
  <p>WarrantiesHomeButton.js</p>
  
  <pre><code>import React, { useState, useEffect, useCallback } from 'react';
  import { useSelector, useDispatch } from 'react-redux';
  import { WarrantiesHomeMenu } from '../WarrantiesHomeMenu';
  import { userService } from '../services';
  import { HomeButton } from '../components';
  import { screenNames } from '../constants';
  import { userActions } from '../store';
  import PropTypes from 'prop-types';
  
  const WarrantiesHomeButton = ({ navigation }) =&gt; {
    const [showWarrantiesMenu, setShowWarrantiesMenu] = useState(false);
  
    const { warrantiesLoginFlow, user } = useSelector(
      (state) =&gt; state.userReducer,
    );
    const dispatch = useDispatch();
  
    const handlePressWarranties = () =&gt; {
      if (!userService.isAuthenticated()) {
        dispatch(userActions.warrantiesLoginStart());
        navigation.navigate(screenNames.SIGN_UP);
      } else {
        setShowWarrantiesMenu(true);
      }
    };
  
    useEffect(() =&gt; {
      validateWarrantiesFlow();
    });
  
    const validateWarrantiesFlow = useCallback(() =&gt; {
      if (warrantiesLoginFlow &amp;&amp; user.id) {
        setShowWarrantiesMenu(true);
        dispatch(userActions.warrantiesLoginStop());
      }
    }, [warrantiesLoginFlow, user.id, dispatch]);
  
    const handleModalPress = () =&gt; {
      setShowWarrantiesMenu(false);
      navigation.navigate(screenNames.SERVICE_CENTERS);
    };
  
    const closeWarrantiesHomeMenu = () =&gt; {
      setShowWarrantiesMenu(false);
    };
  
    return (
      &lt;&gt;
        &lt;HomeButton
          testID="HomeButton"
          text="Revisiones garantía"
          icon="toolBox"
          onPress={handlePressWarranties}
        /&gt;
  
        &lt;WarrantiesHomeMenu
          visible={showWarrantiesMenu}
          onPress={handleModalPress}
          navigation={navigation}
          closeModal={closeWarrantiesHomeMenu}
        /&gt;
      &lt;/&gt;
    );
  };
  
  WarrantiesHomeButton.propTypes = {
    navigation: PropTypes.objectOf(PropTypes.any),
  };
  
  export { WarrantiesHomeButton };
  </code></pre>
  
  <p>WarrantiesHomeButton.test.js</p>
  
  <pre><code>import * as React from 'react';
  import { Provider } from 'react-redux';
  import {
    render as rtlRender,
    fireEvent,
    wait,
    act,
  } from '@testing-library/react-native';
  import { userService } from '../services';
  import { screenNames } from '../constants';
  import { WarrantiesHomeButton } from './WarrantiesHomeButton';
  import { store } from '@auteco/store';
  
  jest.mock('@auteco/components', () =&gt; require('@auteco/test').mockComponents());
  
  jest.mock('../WarrantiesHomeMenu', () =&gt; {
    const { mockComponent } = require('@auteco/test');
    return {
      WarrantiesHomeMenu: mockComponent('WarrantiesHomeMenu'),
    };
  });
  
  describe('&lt;WarantiesHomeButton/&gt;', () =&gt; {
    let mockProps;
    const setState = jest.fn();
    beforeAll(() =&gt; {
      mockProps = {
        navigation: {
          navigate: jest.fn(),
          dangerouslyGetParent: jest.fn(() =&gt; ({ state: null })),
        },
      };
      jest.spyOn(userService, 'isAuthenticated').mockReturnValue(true);
    });
  
    function render(ui) {
      return rtlRender(&lt;Provider store={store}&gt;{ui}&lt;/Provider&gt;);
    }
  
    it('Should Render correctly', () =&gt; {
      const { baseElement } = render(&lt;WarrantiesHomeButton {...mockProps} /&gt;);
      expect(baseElement).toMatchSnapshot();
    });
  
    describe('And user is authenticated', () =&gt; {
      describe('And button is pressed', () =&gt; {
        it('Should show WarrantiesMenu by setting setShowWarrantiesMenu state to true', async () =&gt; {
          jest.spyOn(React, 'useState').mockReturnValue([false, setState]);
          const { getByTestId } = render(&lt;WarrantiesHomeButton {...mockProps} /&gt;);
          const button = getByTestId('HomeButton');
          button.props.onPress();
          await wait();
          expect(setState).toBeCalledWith(true);
        });
      });
    });
  
    describe('And user is not authenticated', () =&gt; {
      describe('And button is pressed', () =&gt; {
        it('Should navigate to signUpScreen', async () =&gt; {
          jest.spyOn(userService, 'isAuthenticated').mockReturnValue(false);
          jest.spyOn(React, 'useState').mockReturnValue([false, setState]);
          const { getByTestId } = render(&lt;WarrantiesHomeButton {...mockProps} /&gt;);
          const button = getByTestId('HomeButton');
          act(() =&gt; {
            button.props.onPress();
          });
          expect(mockProps.navigation.navigate).toBeCalledWith(
            screenNames.SIGN_UP,
          );
        });
      });
    });
  });
  </code></pre>
  
  <p>error in console</p>
  
  <pre><code>  console.error node_modules/react-native/Libraries/YellowBox/YellowBox.js:63
      Warning: React has detected a change in the order of Hooks called by WarrantiesHomeButton. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks
  
         Previous render            Next render
         ------------------------------------------------------
      1. useState                   useContext
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  
          in WarrantiesHomeButton
          in Provider
          in View (created by View)
          in View (created by AppContainer)
          in View (created by View)
          in View (created by AppContainer)
          in AppContainer (at src/index.js:26)
  
    console.error node_modules/react-native/Libraries/YellowBox/YellowBox.js:63
      The above error occurred in the &lt;WarrantiesHomeButton&gt; component:
          in WarrantiesHomeButton
          in Provider
          in View (created by View)
          in View (created by AppContainer)
          in View (created by View)
          in View (created by AppContainer)
          in AppContainer (at src/index.js:26)
  
      Consider adding an error boundary to your tree to customize error handling behavior.
  
  
   FAIL  src/components/home/WarrantiesHomeButton/WarrantiesHomeButton.test.js
    &lt;WarantiesHomeButton/&gt;
      ✓ Should Render correctly (55ms)
      And user is authenticated
        And button is pressed
          ✓ Should show WarrantiesMenu by setting setShowWarrantiesMenu state to true (12ms)
      And user is not authenticated
        And button is pressed
          ✕ Should navigate to signUpScreen (77ms)
  
    ● &lt;WarantiesHomeButton/&gt; › And user is not authenticated › And button is pressed › Should navigate to signUpScreen
  
      TypeError: Cannot read property 'length' of undefined
  
        11 |   const [showWarrantiesMenu, setShowWarrantiesMenu] = useState(false);
        12 | 
      &gt; 13 |   const { warrantiesLoginFlow, user } = useSelector(
           |                                         ^
        14 |     (state) =&gt; state.userReducer,
        15 |   );
        16 |   const dispatch = useDispatch();
  
        at areHookInputsEqual (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5703:38)
        at updateMemo (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6336:11)
        at Object.useMemo (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6703:16)
        at useMemo (node_modules/react/cjs/react.development.js:1592:21)
        at useSelectorWithStoreAndSubscription (node_modules/react-redux/lib/hooks/useSelector.js:31:41)
        at useSelector (node_modules/react-redux/lib/hooks/useSelector.js:117:12)
        at WarrantiesHomeButton (src/components/home/WarrantiesHomeButton/WarrantiesHomeButton.js:13:41)
        at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5762:18)
        at updateFunctionComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7579:20)
        at beginWork$1 (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9152:16)
  
  Test Suites: 1 failed, 1 total
  Tests:       1 failed, 2 passed, 3 total
  Snapshots:   1 passed, 1 total
  Time:        4.846s, estimated 5s
  Ran all test suites matching /WarrantiesHomeButton/i.
  
  Watch Usage: Press w to show more.
  </code></pre>