CODEWITHSUNDEEP
reactjsreact-nativereactjs-fluxreact-native-router-flux
rushabh
rushabh

Reputation: 11

Can't perform a React state update on an unmounted component. memory leak

I'm using react-native-router-flux and passing address to previous component. Value pass but i get warning Can't perform a React state update on an unmounted To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.


class ChangeAddress extends Component {

  constructor(props) {
    super(props);
    this.state = {
      text:''
    };
    this.handleChange = this.handleChange.bind(this);
  }

    onPressNext =() => {
       Actions.replace('Navigate', {text:this.state.text});
    }

    handleChange(text) {
      this.setState({ text: text });
    }

  render() {
       return(
        <View>
            <TextInput
                placeholder="Enter Address"         
                onChangeText={this.handleChange } 
            />
            <Button title =" Save Address" onPress={this.onPressNext}  />
        </View>
        );
  }
}
export default ChangeAddress;```

Upvotes: 0

Views: 372

Answers (1)

Raj Gohel
Raj Gohel

Reputation: 1102

Try this sample code:-

Look where I added _isMounted and follow the same in code

class Page extends Component {
 _isMounted = false;

 state = {
   isLoading: true
 }

 componentDidMount() {
  this._isMounted = true;

  callAPI_or_DB(...).then(result => {
    if (this._isMounted) {
     this.setState({isLoading: false})
   }
  });
}

componentWillUnmount() {
this._isMounted = false;
}

render() {
  return (
    <div>Whatever</div>
    );
  }
}

export default Page;

Upvotes: 1

Related Questions