5

For one screen in my React Native app, hot reloading wasn't working. I found that the solution was to change this

componentDidMount = () => {
  <...do stuff with this.props...>
}

to this

componentDidMount() {
  <...do stuff with this.props...>
}

So all I did was change componentDidMount from an arrow function to a non-arrow function. So my question is:

Why does changing it to a non-arrow function make hot reloading work again? I know that making it a non-arrow function means that if the function were called from some other context, the value of this would be re-bound to the context that the function is called in, whereas with an arrow function it will always be bound to the component in which it was defined. But how does this affect hot reloading? Does hot reloading cause componentDidMount to get called from a different context, and this to get re-bound? If so, how would that affect hot reloading?

Thanks!

UPDATE

Some users asked if this were a duplicate of (Methods in ES6 objects: using arrow functions) or (Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?)

This is not a duplicate of either of these. Please note that I did outline the differences between arrow and non-arrow functions. My question is about how these differences apply to hot reloading specifically.

gkeenley
  • 2,920
  • 1
  • 18
  • 45
  • Possible duplicate of [Methods in ES6 objects: using arrow functions](https://stackoverflow.com/questions/31095710/methods-in-es6-objects-using-arrow-functions) – ponury-kostek Feb 25 '19 at 17:19
  • Possible duplicate of [Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?](https://stackoverflow.com/questions/34361379/arrow-function-vs-function-declaration-expressions-are-they-equivalent-exch) – jdecid Feb 25 '19 at 17:20
  • @ponury-kostek and JosepJoestar This isn't a duplicate. I know the difference between arrow and non-arrow functions, I'm just trying to understand how that difference applies to hot reloading :) – gkeenley Feb 25 '19 at 17:25
  • Related: React takes care to keep lifecycle methods properly bound to the instance they are defined on, so you don't have to do it manually (usually). – Garrett Motzner Feb 25 '19 at 17:55

1 Answers1

1

I think that when a method is declared as

componentDidMount () {
   <... do stuff with this.props ...>
}

it enables the interpreter to optimize the code because it is a class method - it does not belong to the class itself but it does not change from object to object.

ie there is a class A and method b - in all instances of class A method b will be the same and the optimizer can see it and optimize it

when the method is declared as

componentDidMount = () => {
   <... do stuff with this.props ...>
}

it actually creates a method for each instances A and therefore the optimizer sees different methods b and can not optimize

Yaroslav Malyk
  • 313
  • 4
  • 11
  • thanks for your insight, I didn't know that ^^ So I'm still wondering why having the arrow function syntax would cause hot reloading to not work. Any idea? – gkeenley Feb 25 '19 at 17:33
  • At first I thought that there's a scrolling wrapper to save the state and *componentWill/DidMount* do not start at all when updating because there is no update on the wrraper but if you say that you have no arrow I think that there is a problem with the cache - since the arrows function is a new function that returns the original with the correct one then you change the very original function but not the arrows which returns the original - so the function is considered equal and the cache cancels the update code [described](https://github.com/facebook/react-native/issues/15363) – Yaroslav Malyk Feb 25 '19 at 20:30