gaearon / gaearon/react-hot-loader

Hot-reload resets component variables to the initial state.

Open
#840 0 comments 2 reactions 0 assignees View on GitHub
discussion
Dominant language
JavaScript
Stars
12.2k
Forks
775
PR merge metrics
No merged PRs in 30d

Description

Given class A1
```js
class A1 extends Component {
constructor(){
this.myVariable1 = 1;
this.myVariable2 = 1;
this.myVariable3 = 1;
}
componentWillMount(){
this.myVariable1 = 10;
}
render(){
this.myVariable2++
}
}
```
Is hot replaced by the class A2
```js
class A1 extends Component {
constructor(){
this.myVariable1 = 2;
this.myVariable2 = 2;
this.myVariable3 = 2;
}
....
}
```

## Expected
`myVariable1` and `myVariable2` to keep their values, as long they were changed during the life time (#no-time-travel).
`myVariable3` to get the new value.

## Actual
all variables got updated.

## Reason
During the inject react-stand-in creates 2 classes - the old and the new. If variable got changed - the new value will be injected into instances.
It actually was made to transfer arrow functions, but will transfer all the class methods, regardless of the changes made in instances.

## Solution
Inject a new value, only if an existing variable matches the old one.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.