title: Next.js+redux+react - Header components is updated before Body component and it looks wierd
body: <p>I'm struggling with a very strange behavior.</p>
  
  <p>This is my <code>Private</code> page:</p>
  
  <pre><code>const Private = (props) =&gt; {
      useEffect(() =&gt; {
          if (!props.isAuthenticated) {
              Router.push('/login');
          }
      }, [props.isAuthenticated]);
  
      return (&lt;Layout /&gt;);
  };
  </code></pre>
  
  <p>The <code>Layout</code> component contains an <code>Header</code> component that renders also depending on <code>props.isAuthenticated</code> (has an <code>if</code> statement in the <code>render()</code> method).</p>
  
  <p>I'm using redux-saga, so when the user logout from the system, a <code>LOGOUT_SUCCESS</code> action is being dispatched and the reducer sets <code>props.isAuthenticated</code> to <code>false</code>.</p>
  
  <p>Till now everything fine, <strong>BUT</strong>, when this happening, what I see is that:</p>
  
  <p>1) First the <code>Header</code> component is updating its display</p>
  
  <p>2) After (let's say <strong>2 seconds</strong>), I see the <code>/login</code> body.</p>
  
  <p>This is very strange, when the user need to see an updated header but still with the previous body.</p>
  
  <p>My guess is that the Header is updated before the <code>Router.push</code> (because <code>props.isAuthenticated</code> was changed) that takes time because it needs to render the <code>/login</code> page.</p>
  
  <p>Am i right?
  How can i fix it?
  What is the best practice such that the whole page will change in once?</p>
  
  <p>Maybe another good question to ask here, is where should the redirect happen? in the end of the saga? (<code>yield call(Router.push, '/login')</code>) or in the page useEffect authentication check?</p>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>The logout saga:</p>
  
  <pre><code>function* logoutFlow() {
      try {
          const res = yield call(sendLogoutRequest);
          yield put({ type: LOGOUT_SUCCESS });
      } catch (error) {
          console.log(error)
      }
  }
  
  export function* watchLogoutRequest() {
      yield takeLatest(LOGOUT_REQUEST, logoutFlow)
  }
  </code></pre>
  
  <p>The Header component:</p>
  
  <pre><code>const Header = (props) =&gt; {
      if(props.isAuthenticated){
           return &lt;Button1 /&gt;;
      } else {
           return &lt;Button2 /&gt;;
      }
  }
  </code></pre>
  
  <p>The login/logout reducer:</p>
  
  <pre><code>import { LOGIN_SUCCESS, LOGIN_FAILURE, LOGIN_REQUEST, LOGOUT_REQUEST, LOGOUT_SUCCESS } from './loginTypes';
  
  const initialState = {
    isAuthenticated: false,
    loading: false,
    error: ''
  };
  
  export default (state = initialState, action) =&gt; {
    switch (action.type) {
      case LOGIN_REQUEST:
        return {
          isAuthenticated: false,
          loading: true,
          error: ''
        };
      case LOGIN_SUCCESS:
        return {
          isAuthenticated: true,
          loading: false,
          error: ''
        };
      case LOGIN_FAILURE:
        return {
          isAuthenticated: false,
          loading: false,
          error: action.error
        };
      case LOGOUT_REQUEST:
        return {
          ...state,
          loading: true
        };
      case LOGOUT_SUCCESS:
        return initialState;
      default:
        return state;
    }
  };
  
  </code></pre>