React universal redux-saga memory leak

Question

I am working on a React isomorphic app that uses redux and redux-saga. My problem is that the node process that runs the app takes more and more memory as requests get processed, until it eventually runs out of memory.

I profiled the app with node --inspect and noticed that the saga library keeps creating (array) type references in memory that never get cleared, even after garbage collection runs.

To test the issue, run this project and profile it with chrome-devtools: https://github.com/MartinCerny-awin/isomorphic-react-redux-saga-ssr

(not my project, but it seems to behave the same way)

You can see these objects in the heap diff: updateState in system / Context @1770579 context in cancel()

I have tried binding the redux store and the saga middleware to the express response, thinking that it was a request namespace issue, but that doesn't fix it.

Answer 1

Redux saga task cancellation will prevent memory leaks.

CANCEL SAGAS ON COMPONENT UNMOUNT/ROUTE CHANGE

I think the issue is that you are not cancelling the sagas after the component associated with the saga unmounts. This could lead to a memory leak as the saga keeps waiting for an action and doesn't terminate.

    import { LOCATION_CHANGE } from 'react-router-redux';
    // other imports

    function* rootSaga() {
      const watcher = yield [
        takeLatest(GET_TODO, getToDoSaga),
        // your other sagas
      ];

      // the saga gets cancelled when your route changes. Instead 
      // a custom action can also be dispatched from your
      // componentWillUnMount of ToDo component
      yield take(LOCATION_CHANGE); 
      yield watcher.map((task) => cancel(task));
    }

    export default [
      rootSaga,
    ];