title: Async Await API call inside componentDidMount() is suddenly failing/exceeding timeout? React-Native. Redux. Typescript
body: <p>Async call inside componentDidMount is exceeding timeout and failing.</p>
  <p>The api call itself is not using redux, but the data retrieved is.</p>
  <p>Is this an instance where I would need to use Redux Thunk?
  How would Thunk be applied to the initial get call?</p>
  <p>Can't seem to get passed the initial await call.</p>
  <p><strong>Component.tsx</strong></p>
  <pre><code> async componentDidMount() {
      const { resetItems, loadItems } = this.props;
      try {
        const stuff: Stuff[] | null = await stuffService.getItems();
        if (stuff &amp;&amp; stuff.length &gt; 0) {
          loadItems(stuff);
        } else {
          resetItems();
        }
      } catch {}
    }
  </code></pre>
  <p><strong>stuffService.tsx</strong></p>
  <pre><code>function getItems(): Promise&lt;Stuff[] | null&gt; {
    return request({
      url: &quot;Items&quot;,
      method: &quot;GET&quot;,
    });
  }
  </code></pre>
  <p><strong>index.ts</strong></p>
  <pre><code>export function loadItems(stuff: Stuff[]): ActionTypes {
    return {
      type: &quot;LOAD_ITEMS&quot;,
      stuff,
    };
  }
  
  export function resetThings(): ActionTypes {
    return {
      type: &quot;RESET_ITEMS&quot;,
    };
  }
  </code></pre>
  <p>Things I've tried:
  Moving the call outside of componentDidMount.
  Using other life cycle methods.
  Using Thunk on the loadItems();</p>
  <pre><code>export function loadItemsAsync(stuff: Stuff[]) {
    return (dispatch) =&gt; {
      setTimeout(() =&gt; {
        dispatch(loadItems(stuff));
      }, 9000);
    };
  }
  </code></pre>