title: React-Redux : Child component not re-rendering on parent state change when using connect() in child
body: <p>I am new to Reactjs and have been trying to create a real world website using React-Redux.</p>
  
  <p>Here in my WebApp, when there is a state change in <strong>Home</strong> (Parent Component) ,       child component <strong>HomePage</strong> does not re-render. I will explain in detail below,</p>
  
  <p>This is my Parent Component,</p>
  
  <pre><code>import React, {Component} from 'react';
  import NavBar from './../components/NavBar';
  import HomePage from './../components/Home/HomePage';
  import {connect} from 'react-redux';
  import {loadCity} from './../actions/MainPage';
  import Footer from './../components/Footer';
  import {instanceOf} from 'prop-types';
  import {withCookies, Cookies} from 'react-cookie';
  
  class Home extends Component {
  
      constructor(props) {
          super(props);
  
          this.rerender = this
              .rerender
              .bind(this);
  
          this.state = {
              renderFlag: false
          }
      }
  
      static propTypes = {
          cookies: instanceOf(Cookies).isRequired
      };
  
      componentDidMount() {
          this
              .props
              .loadCity();
  
      }
  
      rerender() {
          this.setState({
              renderFlag: !this.state.renderFlag
          })
      }
  
      render() {
  
          return (
              &lt;div&gt;
                  &lt;NavBar placelist={this.props.result} rerenderfun={() =&gt; this.rerender()}/&gt;
                  &lt;HomePage/&gt;
                  &lt;Footer/&gt;
              &lt;/div&gt;
          );
      }
  }
  
  const mapStateToProps = (state) =&gt; {
      return {result: state.cityReducer}
  };
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          loadCity: () =&gt; {
              dispatch(loadCity());
          }
      };
  };
  
  export default withCookies(connect(mapStateToProps, mapDispatchToProps)(Home));
  </code></pre>
  
  <p>Here in my <strong>NavBar</strong> component I have to select city. When I click on city a state change occurs in <strong>HOME</strong> (Parent Component) which causes child components to re-render. But all the child components <strong>except HomePage</strong> re-render.</p>
  
  <p>But if I remove <strong>connect()</strong> from <strong>HomePage</strong>, then this page gets re-rendered.</p>
  
  <p>Here is my code for HomePage,</p>
  
  <pre><code>import React, {Component} from 'react';
  import SearchSection from './SearchSection';
  import {connect} from 'react-redux';
  import {loadInfoData} from './../../actions/MainPage';
  import {instanceOf} from 'prop-types';
  import {withCookies, Cookies} from 'react-cookie';
  import InfoSection from './../../container/Home/InfoSection ';
  
  class HomePage extends Component {
  
      static propTypes = {
          cookies: instanceOf(Cookies).isRequired
      };
  
      componentWillMount() {
          const {cookies} = this.props;
          this.setState({
              city: cookies.get('place')
          });
      }
  
      componentDidMount() {
          this
              .props
              .loadInfoData(this.state.city);
      }
  
      componentWillUpdate(nextProps, nextState) {
          console.log('Component WILL UPDATE!');
      }
  
      render() {
  
          return (
              &lt;div&gt;&lt;SearchSection/&gt;  &lt;InfoSection result={this.props.result}/&gt; 
  
              &lt;/div&gt;
          );
      }
  }
  
  const mapStateToProps = (state) =&gt; {
      return {data: state.cityReducer}
  };
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          loadInfoData: (selectedCity) =&gt; {
              dispatch(loadInfoData(selectedCity));
          }
      };
  };
  
  export default withCookies(connect(mapStateToProps, mapDispatchToProps)(HomePage));
  </code></pre>
  
  <p>Please help me find the issue and resolve it. I want <strong>HomePage</strong> to get re-rendered on <strong>Home</strong> state change.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Reducer</p>
  
  <pre><code>let defaultState = {
      result: "",
      info: "",
      recentlyadded: ""
  }
  
  const cityReducer = (state = defaultState, action) =&gt; {
      if (action.type === "GET_CITY") {
          return {
              ...state,
              result: action.result
          }
      } else if (action.type === "GET_INFO_DATA") {
          return {
              ...state,
              info: action.result
          }
      } else if (action.type === "GET_MAIN_RECENTLY_ADDED") {
          return {
              ...state,
              recentlyadded: action.result
          }
      } else {
          return {
              ...state
          }
      }
  }
  
  export default cityReducer;
  </code></pre>
  
  <p>Action</p>
  
  <pre><code>import axios from 'axios';
  
  export function loadCity() {
      return (dispatch) =&gt; {
          return axios
              .get("**RESTAPILINK**")
              .then((response) =&gt; {
                  dispatch(getPlace(response.data.result));
              })
      }
  }
  
  export function getPlace(result) {
      return {type: "GET_CITY", result}
  }
  
  export function loadInfoData(selectedCity) {
      var url = "**RESTAPILINK**" + selectedCity;
      return (dispatch) =&gt; {
          return axios
              .get(url)
              .then((response) =&gt; {
                  dispatch(getInfoData(response.data));
              })
      }
  }
  
  export function getInfoData(result) {
      return {type: "GET_INFO_DATA", result}
  }
  
  export function loadRecentlyAdded(selectedCity) {
      var url = "**RESTAPILINK**" + selectedCity;
      return (dispatch) =&gt; {
          return axios
              .get(url)
              .then((response) =&gt; {
                  dispatch(getRecentlyAdded(response.data));
              })
      }
  }
  
  export function getRecentlyAdded(result) {
      return {type: "GET_MAIN_RECENTLY_ADDED", result}
  }
  </code></pre>
  
  <p>My NavBar component</p>
  
  <pre><code>import React, {Component} from 'react';
  import {
      Collapse,
      Navbar,
      NavbarToggler,
      NavbarBrand,
      Nav,
      NavItem
  } from 'reactstrap';
  import {NavLink} from 'react-router-dom';
  import cityicon from '../assets/images/city/Bangalore.png';
  import {instanceOf} from 'prop-types';
  import {withCookies, Cookies} from 'react-cookie';
  
  class NavBar extends Component {
  
      constructor(props) {
          super(props);
  
          this.toggle = this
              .toggle
              .bind(this);
  
          this.toggleHidden = this
              .toggleHidden
              .bind(this);
  
          this.closeOverlay = this
              .closeOverlay
              .bind(this);
  
          this.escFunction = this
              .escFunction
              .bind(this);
  
          this.handleClick = this
              .handleClick
              .bind(this);
  
          this.state = {
              isOpen: false,
              isHidden: true,
              isLocation: false,
              city: "Select your city",
              classname: "city-section"
          };
      }
  
      static propTypes = {
          cookies: instanceOf(Cookies).isRequired
      };
  
      componentWillMount() {
  
          const {cookies} = this.props;
          let newstate = (cookies.get('place') != null)
              ? true
              : false;
          if (newstate) {
              this.setState({
                  city: cookies.get('place')
              });
          }
          this.setState({isLocation: newstate, isHidden: newstate});
  
      }
  
      toggle() {
          this.setState({
              isOpen: !this.state.isOpen
          });
      }
  
      toggleHidden() {
          this.setState({
              isHidden: !this.state.isHidden
          });
      }
  
      closeOverlay() {
          this.setState({
              isHidden: !this.state.isHidden
          });
      }
  
      escFunction(event) {
          if (event.keyCode === 27) {
              if (this.state.isHidden === false) {
                  this.closeOverlay();
              }
  
          }
      }
  
      handleClick(selectedCity) {
          const {cookies} = this.props;
          cookies.set("place", selectedCity);
          this
              .props
              .rerenderfun();
  
          if (this.state.isLocation) {
              this.setState({
                  isHidden: !this.state.isHidden,
                  city: cookies.get('place')
              })
          } else {
              this.setState({
                  isLocation: !this.state.isLocation,
                  isHidden: !this.state.isHidden,
                  city: cookies.get('place')
              })
          }
      }
  
      render() {
  
          var overlayClass = 'city-section';
          if (!this.state.isLocation) {
              overlayClass += " city-section visible"
          } else if (this.state.isHidden) {
              overlayClass += " city-section hidden";
          } else {
              overlayClass += " city-section visible"
          }
  
          return (
              &lt;div&gt;
                  &lt;Navbar className="navbar navbar-expand-md navbar-dark" light expand="md"&gt;
                      &lt;NavbarBrand href="/"&gt;
                          &lt;i className="fa fa-graduation-cap mr-2" aria-hidden="true"&gt;&lt;/i&gt;Company
                      &lt;/NavbarBrand&gt;
                      &lt;NavbarToggler onClick={this.toggle}/&gt;
                      &lt;Collapse isOpen={this.state.isOpen} navbar&gt;
                          &lt;Nav className="ml-auto" navbar&gt;
                              &lt;NavItem&gt;
                                  &lt;NavLink className="nav-link" to="/"&gt;Favourites&lt;/NavLink&gt;
                              &lt;/NavItem&gt;
                              &lt;NavItem&gt;
                                  &lt;NavLink to="/" className="nav-link"&gt;Login&lt;/NavLink&gt;
                              &lt;/NavItem&gt;
                              &lt;NavItem&gt;
                                  &lt;a className="nav-link" onClick={() =&gt; this.toggleHidden()}&gt;
                                      &lt;i className="fa fa-map-marker mr-2" aria-hidden="true"&gt;&lt;/i&gt;{this.state.city}&lt;/a&gt;
                              &lt;/NavItem&gt;
                          &lt;/Nav&gt;
                      &lt;/Collapse&gt;
                  &lt;/Navbar&gt;
  
                  &lt;div className={overlayClass} onClick={this.closeOverlay}&gt;
                      &lt;div
                          className="city-content py-5"
                          onClick={(e) =&gt; {
                          e.stopPropagation();
                      }}&gt;
                          &lt;div className="container"&gt;
                              &lt;div className="row text-center"&gt;
                                  &lt;div className="col-12"&gt;
                                      &lt;h4 className="text-secondary"&gt;Select your City&lt;/h4&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              {Object
                                  .entries(this.props.placelist.result)
                                  .map(([k, value]) =&gt; {
                                      return (
                                          &lt;div className="row text-center mt-5" key={k}&gt;
                                              &lt;div className="col-md-2 offset-md-5"&gt;
                                                  &lt;div
                                                      className="card border-0 location-card"
                                                      onClick={() =&gt; {
                                                      this.handleClick(value.city)
                                                  }}&gt;
                                                      &lt;div className="card-body"&gt;
                                                          &lt;img className="location-img" src={cityicon} alt="bangalore"/&gt;
                                                          &lt;p className="font-weight-bold mt-3 mb-0"&gt;{value.city}&lt;/p&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      )
                                  })}
  
                              &lt;div className="row text-center pt-5"&gt;
                                  &lt;div className="col-12"&gt;
                                      &lt;h6 className="text-secondary mt-3 font-italic"&gt;Currently we are only in Bangalore&lt;/h6&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default withCookies(NavBar);
  </code></pre>