title: React hook useEffect always re-render on React Navigation
body: <p>When using functional components, that are the default "page" on createSwitchNavigator, after navigating to the bottomTabNavigator, if the state is changed (not only when the conditional trigger is changed), the whole component will re-render, causing the useEffect code to be executed again.</p>
  
  <p>I have the navigation routed like this:</p>
  
  <pre><code>const Routes = createAppContainer(
    createSwitchNavigator({
      Sign: createSwitchNavigator({
        Preload,
        SignIn,
      }),
      App: createBottomTabNavigator(
        {
          Home,
          Employees,
        },
      ),
    }),
  );
  </code></pre>
  
  <p>and the functional component which makes navigation between SignIn and Home:</p>
  
  <pre><code>const Preload = ({navigation, logged}) =&gt; {
      useEffect(() =&gt; {
          if (logged) {
              navigation.navigate({routeName: 'Home'});
          } else {
              navigation.navigate({routeName: 'SignIn'});
          }
      }, [logged]);
  
      return (
          &lt;Container&gt;
              &lt;ActivityIndicator color="#1199DD" size={50}/&gt;
          &lt;/Container&gt;
      );
  }
  </code></pre>
  
  <p>also noting that there is a container/page connector for flux action dispatcher using the hooks:</p>
  
  <pre><code>const mapDispatchToProps = dispatch =&gt; ({
      actions: {
          ...appActions(dispatch),
          dispatch
      },
  })
  
  const mapStateToProps = state =&gt; ({
      ...state.app
  })
  
  
  export default connect(mapStateToProps, mapDispatchToProps)(Preload)
  </code></pre>
  
  <p>the connect function mainly creates a consumer passing props, dispatch and my store state:</p>
  
  <pre><code>const isFunction = target =&gt; typeof target === 'function'
  const defaultMapStateToProps = () =&gt; ({})
  const defaultMapDispatchToProps = () =&gt; ({})
  
  export default appContext =&gt; (originalMapStateToProps, originalMapDispatchToProps) =&gt; {
  
      const { Consumer } = appContext
  
      const mapStateToProps = isFunction(originalMapStateToProps)
          ? originalMapStateToProps
          : defaultMapStateToProps
      const mapDispatchToProps = isFunction(originalMapDispatchToProps)
          ? originalMapDispatchToProps
          : defaultMapDispatchToProps
  
      return Component =&gt; (props) =&gt; (
          &lt;Consumer&gt;
              {store =&gt; (
                  &lt;Component
                      {...props}
                      {...mapStateToProps(store.getState())}
                      {...mapDispatchToProps(store.dispatch)}
                  /&gt;
              )}
          &lt;/Consumer&gt;
      )
  }
  </code></pre>
  
  <p>I've tried using hook useRef to consider the last value, but since it re-renders everything, the last value is not trusted, since it will always recreate this variable.</p>
  
  <p>What is really triggering everything to re-render? And how would be the best approach to bypass it?</p>