title: How to prevent UI freeze when calling API with axios
body: <p>I am trying to load data when my component loads using <code>componentDidMount</code>. However calling the Redux action, making the call with axios seems to freeze the UI. When I have a form with 12 inputs and one makes an API call I would assume I can type in the other inputs and not have them freeze up on me.</p>
  
  <p>I've tried reading some other posts on the subject but they are all a little different and everything I have tried doesn't seem to resolve the issue.</p>
  
  <p>I am working on linux using React 16.8 (when using RN I use 55.4)</p>
  
  <p>I have tried making my <code>componentDidMount</code> async as well as the redux-thunk action. It didn't seem to help anything, so I must be doing something wrong.</p>
  
  <p>I tried doing the following with no success. Just using short form for what I tried. Actual code listed below.</p>
  
  <pre><code>async componentDidMount() {
      await getTasks().then();
  }
  </code></pre>
  
  <p>And I tried this</p>
  
  <pre><code>export const getTasks = () =&gt; (async (dispatch, getState) =&gt; {
      return await axios.get(`${URL}`, AJAX_CONFIG).then();
  }
  </code></pre>
  
  <p><strong>Current Code:</strong></p>
  
  <p>Component.js</p>
  
  <pre><code>componentDidMount() {
      const { userIntegrationSettings, getTasks } = this.props;
      // Sync our list of external API tasks
      if (!isEmpty(userIntegrationSettings)) {
          getTasks(userIntegrationSettings.token)
              // After we fetch our data from the API create a mapping we can use
              .then((tasks) =&gt; {
                  Object.entries(tasks).forEach(([key, value]) =&gt; {
                      Object.assign(taskIdMapping, { [value.taskIdHuman]: key });
                  });
              });
      }
  }
  
  </code></pre>
  
  <p>Action.js</p>
  
  <pre><code>export const getTasks = () =&gt; ((dispatch, getState) =&gt; {
      const state = getState();
      const { token } = state.integrations;
  
      const URL = `${BASE_URL}/issues?fields=id,idReadable,summary,description`;
      const AJAX_CONFIG = getAjaxHeaders(token);
  
      dispatch(setIsFetchingTasks(true));
  
      return axios.get(`${URL}`, AJAX_CONFIG)
          .then((response) =&gt; {
              if (!isEmpty(response.data)) {
                  response.data.forEach((task) =&gt; {
                      dispatch(addTask(task));
                  });
  
                  return response.data;
              } else {
                  dispatch(setIsFetchingTasks(false));
              }
          })
          .catch((error) =&gt; {
              dispatch(setIsFetchingTasks(false));
              errorConsoleDump(error);
              errorHandler(error);
          });
  });
  </code></pre>
  
  <p>reducer.js</p>
  
  <pre><code>export default (state = defaultState, action) =&gt; {
      switch (action.type) {
          case ADD_TASK:
          case UPDATE_TASK:
              return update(state, {
                  byTaskId: { $merge: action.task },
                  isFetching: { $set: false }
              });
          default:
              return state;
      }
  };
  </code></pre>