Memory leak with Immer

[louptheron]

Hi,

I am fetching an array of ~200kB elements every X seconds in my app, after running the app for few hours, I can see some memory leaks which sounds like it is coming from Immer.
I isolated all the app components, the only functions that a causing the leak is the dispatch(setVesselsFromAPI(vessels)), that is why I think it may coming from the state update.
After running the app few hours, it break Chrome or Firefox as the memory consumed is larger than the memory allowed.

After the API fetch, I save the new array in a Slice with this code :

const vesselSlice = createSlice({
  name: 'vessel',
  initialState: {
    vessels: [],
  },
  reducers: {
    setVesselsFromAPI (state, action) {
      state.vessels = action.payload?.map(vessel => {
        return {
          vesselProperties: {
            ...vessel,
            flagState: vessel.flagState?.toLowerCase(),
            gearsArray: vessel.gearOnboard ? [...new Set(vessel.gearOnboard.map(gear => gear.gear))] : [],
            fleetSegmentsArray: vessel.segments ? vessel.segments.map(segment => segment.replace(' ', '')) : [],
            speciesArray: vessel.speciesOnboard ? [...new Set(vessel.speciesOnboard.map(species => species.species))] : [],
            lastControlDateTimeTimestamp: vessel.lastControlDateTime ? new Date(vessel.lastControlDateTime).getTime() : '',
            hasAlert: !!vessel.alerts?.length
          },
          vesselId: Vessel.getVesselId(vessel),
          isAtPort: vessel.isAtPort,
          course: vessel.course,
          speed: vessel.speed,
          lastPositionSentAt: new Date(vessel.dateTime).getTime(),
          coordinates: transform([vessel.longitude, vessel.latitude], WSG84_PROJECTION, OPENLAYERS_PROJECTION),
          isFiltered: 0,
          filterPreview: 0
        }
      })
    }
 }
})

Chrome shows that some arrays are not being garbage collected :

I tried to use without success (to test if the memory leak could be stopped):

import {setAutoFreeze} from 'immer';
setAutoFreeze(false);

I also tried to create another reducer outside the Slice but I can't modify the state, which is read-only.

Do you have any idea ?
Thank you

[markerikson]

Are you sure this is actually Immer related?

If anything, it might be related to selectors or React-Redux keeping previous values cached.

[louptheron]

It sounds like removing the destructuring (...vessel) and creation of the new vesselProperties object are reducing the memory leak, from ~1mb to ~500kB at each fetch

[louptheron]

@markerikson Isn't the dispatch function caching the action.payload data ? I get the data I sent in the dispatch in the memory leak, even if I don't store them in the Slice state.

[markerikson]

dispatch itself doesn't "cache" anything, no.

Is it perhaps because of the Redux DevTools?

[louptheron]

Okey.
Redux DevTools was disabled for these tests.
I can see the previous state objects disappearing in the memory when I inspect the GC with Chrome, but I just don't know why

[louptheron]

I found: I forgot to remove one component for my tests and this component was listening for events containing the vessels states with addEventListener. As it was containing the same objects than in the Slice I searched in the wrong place.
With a removeEventListener in the useEffect when it is unmounted, the GC can be run and there is no more leak.
Thank you for your help!