React native correct way to cancel promis inside component did mount and optimise component

Question

I'm trying to handle a promise inside a componentDidMount, i want to prevent infinite call to the promise so i want to implement an isMounted variable but i don't really understand when to set the isMounted to false to cancel the promise call.

My idea is to set the isMounted to false inside the componentWillUnmount.

So my logic is to call the promise when the component is mounted and leave the promise when the component is unmounted :

async componentDidMount() {
    if (isMounted) {
      try {
        await RegistrationService.getData();
      } catch (error) {
        console.log(error);
      }
    }
  }

  componentWillUnmount() {
    isMounted = false;
  }

I will be thankful if someone could help me to understand those to life cycle moments and when should i stop the call to the promise

score 1 · Answer 1 · answered Sep 23 '20 at 13:12

1

I think a better approach would be doing something like this:

     state = {
          ready: false
     }

     async componentDidMount() {
          if (ready === false) {
               try {
                    await RegistrationService.getData();
                    this.setState({ ready: true });
               } catch (error) {
                    console.log(error);
               }
          }
     }

And regarding this:

I will be thankful if someone could help me to understand those to life cycle moments and when should i stop the call to the promise

Learn functional components and use hooks!!
It will change your life (well, your 'React' life...)

answered Sep 23 '20 at 13:12

D10S

1,468
2
7
13

the problem that i work on a project since a year and all my components are a function components, i have to start using function component the next project. my question is : you think is a good idea to make the promisse depend of the ready state value? – Khaled Boussoffara Sep 23 '20 at 13:15
Yes. Otherwise I wouldn't suggest it. – D10S Sep 23 '20 at 13:25
and i should call this.state.ready instead of ready ? – Khaled Boussoffara Sep 23 '20 at 13:29
Correct. My bad. I'm too use to functional components. – D10S Sep 23 '20 at 13:59

React native correct way to cancel promis inside component did mount and optimise component

1 Answers1