fat arrow componentDidMount

Question

I found in legacy code

componentDidMount = () => {
...
}

I know it is not valid, but it works. Now, I am curious what is the difference between this, and the right way

componentDidMount() {
...
}

Answer 1

Hi basically you can do it, but it's unnecessary and can also hurt performance. Because each time your function does an arrow operation, it has to create a new function object. So it's just an optimization choice.

Good threads and articles:

• https://github.com/facebook/react/issues/10810
• Pros and cons of using react's life cycle methods in arrow function format
• https://reactarmory.com/answers/when-to-use-arrow-functions
• https://medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1