Hot reloading "fat arrow function" in component not possible

[adesmet]

This code works fine with hot reloading:

export default class App extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = { counter: 1 };
  }

  render() {
    return (
      <div>
        <h1>{this.state.counter}</h1>
        <a onClick={(e) => {
          this.setState({counter:this.state.counter-1})
        }}>Increment</a>
      </div>
    );
  }
}

But when I extract the handler into a variable, it still works functionally but it doesn't hot-reload:

export default class App extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = { counter: 1 };
  }

  increment = (e) => {
    this.setState({counter:this.state.counter+1})
  }

  render() {
    return (
      <div>
        <h1>{this.state.counter}</h1>
        <a onClick={this.increment}>Increment</a>
      </div>
    );
  }
}

Any thoughts on this?

[gaearon]

This is not currently supported and in fact unlikely to ever be supported in React Hot Loader because it transpiles to an assignment inside a constructor. We might have a solution based on Babel which will handle this, in the future.

[eisisig]

Sorry for posting in closed issue.

I guess this is still relevant to v3? Sadly 1. we have a lot of state in UI components 2. We use the arrow way everywhere

Was testing upgrade to v3

[gaearon]

@eisisig Feel free to help out! #242.

[tyleralves]

I know this is old, but I've established what I think of as an acceptable workflow for using fat arrow click handlers with hot reload.

Basically just make a copy of the click handler within your render function, and replace the onClick with that copy. Make changes and enjoy the hot reload goodness, then go back and modify original class property.

import * as React from 'react';

const styles = require('./styles.css');

export class MainContainer extends React.Component<any, any> {
  constructor() {
    super();
    this.state = {
      name: 'Tyler'
    };
  }
  // Make sure to go back and modify this
  handleDivClick = () => {
    console.log('click!');
    this.setState({
      name: 'John'
    });
  };

  render() {
    // Temporary hot-reload copy
    const handleDivClick1 = () => {
      console.log('click!');
      this.setState({
        name: 'TyTy'
      });
    };
    return (
      // Replace onClick with copy
      <div className={styles.color} onClick={handleDivClick1}>{`Name: ${this.state.name}`}</div>
    );
  }
}