I'm trying to implement a very straightforward saga for a PUT endpoint that updates an Object.

export const updateSemester = (semesterId: string, updatedSemester: any) =>
  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 < 300 && response.status >= 200) {
        yield put(updateSemesterSuccess({
            semester: response.data.data,
        }));
        onSuccess && 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 ...
    ]);
}

After the Object is updated, the re-render includes a CSS simple animation. However, the animation is laggy and "skips." I opened up the performance profiler and saw the following:

Waterfall Chart With Stack Trace

JS Flame Chart

There are multiple call 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.

Changing that call to either fork or simply not using a saga effect and providing a callback like updateSemester(semester.id, semester).then((response) => {...}) 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 put(updateSemesterSuccess({semester: response.data.data})); after the request returns.

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 PUT request. Thanks!