Hot reload not working in some cases.

[ThiagoMiranda]

Hi. I have this component: /components/sidebar/SidebarComponent.js

'use strict';

import React from 'react';

require('styles/sidebarMenu/Items.css');

class ItemsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        status: 'error'
    };
  }

  render() {
    return (
      <ul className="list-unstyled">
        <li className={this.state.status}>
            <a href="javascript:;">
                <span className="title">{this.props.title}</span>
                <span className="publish-date">{this.props.date}</span>
                <span className="description">{this.props.description}</span>
            </a>
        </li>
      </ul>
    );
  }
}

ItemsComponent.displayName = 'SidebarMenuItemsComponent';

// Uncomment properties you need
// ItemsComponent.propTypes = {};
ItemsComponent.defaultProps = {
    title: 'Overlay',
    date: 'Ontem, 18 Fev 2016 - 18:06',
    description: 'Descrição do vídeo'
};

export default ItemsComponent;

If I change something inside the render() function I get the updated version on the browser without the manual reload. But if I change something outside the render() function ( like the defaultProps or the constructor() function ) I get the message on the console saying that it was updated but I have to manually refresh the browser to see my modification. Is there something wrong with the code?

Thanks

[sthzg]

Hi @ThiagoMiranda, when you change defaultProps, the constructor() or certain lifecycle methods like componentWillMount(), componentDidMount(), ... they don't reflect immediately since React has already mounted the components.

Webpack is pushing the updated code to the browser, but it doesn't show unless the affected component mounts again, which happens on a hard-reload (as you wrote), or in case of an app with multiple routes when switching between two routes so that the component in question will unmount and then remount again.