What is the difference between both button click in the given React Component?

JavaScript
1 
export default class App extends Component {
  doSomething = () => {
    console.log('Hi');
  }
  render() {
    return (
      <Container>
        <Button onClick={this.doSomething} title="Test" /> 
        <Button onClick={() => this.doSomething()} title="Test" />
      </Container>
    );
  }
}
2

I think there is no difference.

1st way is ideal.
2nd way is just long way of doing the samething. You are calling a function to return doSomething function.

3

As explainmy shimphilip above and i would like to add, for second way you could pass parameters also since you’re using function.

4

I asked the question on stackoverflow. There is also performance difference in both button clicks apart from passing parameters. When the component re-renders, memory is allocated for the second one every time, while the first one just uses memory reference.
React documentation also recommend to bind function in constructor rather than using arrow function to avoid performance issues.

5

True for that about constructor. I read it before in this article. It explained very well all subtle differences.