title: Redux Saga Call Effect on API Request Causes Repaint/Render Latency
body: <p>I'm trying to implement a very straightforward saga for a <code>PUT</code> endpoint that updates an Object.</p>
  <pre class="lang-js prettyprint-override"><code>export const updateSemester = (semesterId: string, updatedSemester: any) =&gt;
    axios.put(SEMESTERS_URL + semesterId, updatedSemester);
  
  export function* handleUpdateSemester(action: UpdateSemesterActionType) {
      const { semester, onSuccess } = action.payload;
      // It hangs here waiting for the response (as expected)
      const response = yield call(updateSemester, semester.id, removeNullFields(semester));
      if (response.status &lt; 300 &amp;&amp; response.status &gt;= 200) {
          yield put(updateSemesterSuccess({
              semester: response.data.data,
          }));
          onSuccess &amp;&amp; onSuccess(response.data.data);
      }
  }
  
  export function* watchUpdateSemester() {
      // handleError just wraps it in a try-catch and `put(ERROR, {error})` when applicable
      yield takeEvery(UPDATE_SEMESTER, handleError(setGlobalError, handleUpdateSemester));
  }
  
  export default function* semestersSaga() {
      yield all([
          // Others ...
          watchUpdateSemester(),
          // Others ...
      ]);
  }
  
  /** Root Saga File **/
  export default function* rootSaga() {
      yield all([
          // Others ...
          semestersSaga(),
          // Others ...
      ]);
  }
  </code></pre>
  <p>After the Object is updated, the re-render includes a CSS simple animation. However, the animation is laggy and &quot;skips.&quot; I opened up the performance profiler and saw the following:</p>
  <p><a href="https://i.stack.imgur.com/lDGfu.jpg" rel="nofollow noreferrer">Waterfall Chart With Stack Trace</a></p>
  <p><a href="https://i.stack.imgur.com/bBphE.png" rel="nofollow noreferrer">JS Flame Chart</a></p>
  <p>There are multiple <code>call</code> effects being executed here, so the stack trace is not super clear, but I presumed that the only one to have that type of latency is the call made out to my external API.</p>
  <p>Changing that <code>call</code> to either <code>fork</code> or simply not using a saga effect and providing a callback like <code>updateSemester(semester.id, semester).then((response) =&gt; {...})</code> removes the re-render latency. The only issue is that you can't put a function generator in a callback, which means I can't <code>put(updateSemesterSuccess({semester: response.data.data}));</code> after the request returns.</p>
  <p>This latency is very strange to me, I thought that the entire purpose of function generators was to mitigate against this exact issue. Am I missing something? I would prefer to keep this saga as simple as possible given that it's just a simple <code>PUT</code> request. Thanks!</p>