setState in async function react native

Question

I use Navigator component in my app, to render content of route i do http request with fetch to get data from server.

componentDidMount () {
    fetch(url).then((res) => {
         this.setState({data: res});
    });
}

Problem I have is that sometimes fetch closure fires when component that called it is no longer mounted so I keep getting error that i'm trying to update unmounted component. This happens if you move quickly between routes. Is there a way to terminate closure execution if component is dismounted?

neciu · Accepted Answer · 2016-06-15 12:55:38Z

4

On mounting your component you should start fetch request which gives Promise and store it.

Then you can make this Promise a CancelablePromise and cancel the promise on unmounting the component.

Here you can read how to make CancelablePromise.

answered Jun 15, 2016 at 12:55

neciu

4,4952 gold badges27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mihael Mamula Over a year ago

Thank you for answer. What I actually had in my closure was fetch, than sort of received data, and setState at and. This give me idea to break this on 3 promises so i can even skip sorting if component is already dismounted on second part.

Moti Azu · Accepted Answer · 2016-06-15 13:33:00Z

0

You should check whether the component is mounted before settings the state.

componentDidMount() {
    this.isMounted = true;
    fetch(url).then((res) => {
        if(this.isMounted) {
            this.setState({this.data: res});
        }
    });
}

componentWillUnmount() {
    this.isMounted = false;
}

answered Jun 15, 2016 at 13:33

Moti Azu

5,4521 gold badge25 silver badges33 bronze badges

2 Comments

neciu Over a year ago

Read the article linked in my answer. isMounted is antpattern.

Moti Azu Over a year ago

Woah, never seen that before. Thanks for the link.

Collectives™ on Stack Overflow

setState in async function react native

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related