'Why ESC generator in Redux Saga waits for promise to be fulfilled?

I am reading Redux Saga instruction docs as the below link: https://redux-saga.js.org/docs/introduction/BeginnerTutorial/

In the code in sagas.js, incrementAsync() waits for delay() which is a promise before going to the next yield. ES6 generator is not an async function. So why this happens?

import { put, takeEvery, all } from 'redux-saga/effects'

const delay = (ms) => new Promise(res => setTimeout(res, ms))

function* helloSaga() {
  console.log('Hello Sagas!')
}

function* incrementAsync() {
  yield delay(1000)
  yield put({ type: 'INCREMENT' })
}

function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync)
}

// notice how we now only export the rootSaga
// single entry point to start all Sagas at once
export default function* rootSaga() {
  yield all([
    helloSaga(),
    watchIncrementAsync()
  ])
}


Solution 1:[1]

Delay is not a promise. It's a saga effect. It signals to the saga middleware that you would like your saga to wait until at least that many MS have passed before re-entering your saga. It's not an async call. If you didn't yield it you could do:

console.log("First");
const foo = delay(5000);
console.log("Second");

and you'd see that the "Second" is logged immediately after the first (not 5 seconds later).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chad S.