0

I'm quite new to Redux Saga, but the problem I am facing is the error:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

What I am trying to do is to call the API inside a while-loop, for each iteration I get back a bunch of races, also an object telling me if there's any more races on the date selected. I can see the network request being made and everything is working fine, except that the whole app freezes and above error is displayed under the console-tab. When the while-loop finishes the idea is to put all the entities in the state to later be used inside multiple <select>.

Saga.js:

function* doFetchRaces(site, date, offset = 0) {
  const endpoint = options.endpoints.getRaces(site, date, offset);
  const response = yield call(request, site, endpoint.url);
  return response;
}

export function* sagafetchRaces(action) {
  const site = yield select(makeSelectSite());
  yield put(changeDate(action.date));

  try {
    let done = false;
    let offset = 0;
    const entities = [];
    while (!done) {
      const res = yield call(doFetchRaces, site, action.date, offset);
      entities.push(...res.results);
      offset += res.results.length;
      done = res.next === null;
    }
    yield put(fetchRacesSuccess(entities));
  } catch (error) {
    console.error(error);
  }
}

Inside index.js:

useEffect(() => {
    if (selectedDate != null) {
      return;
    }
    if (values.meet !== '') {
      fetchMeet(values.meet);
    } else {
      fetchRaces(new Date().toISOString().slice(0, 10));
    }

So the question is: How do I achieve the following without getting the error?

bikkeltio
  • 59
  • 1
  • 6
  • the problem is not related to the saga or your redux-saga. There are common mistakes that produce this error, please read this link to solve the issue https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component – nima Oct 13 '21 at 11:19
  • 1
    @novonimo so it's inside index.js I should be looking? Specifically inside the useEffect : fetchRaces(new Date().toISOString().slice(0, 10)); – bikkeltio Oct 13 '21 at 11:32
  • yes of course, inside your index.js , useEffect hook and where you change the DOM element which gets changes from useEffect . – nima Oct 13 '21 at 11:39
  • more explanation for you: the error shows that your state gets changes and it is reflected inside the return method which is the elements. so you are trying to change an element or state after the component didn't exist. this cause the problem – nima Oct 13 '21 at 11:42

0 Answers0