How to correctly return array in redux state, if the array did not have to be updated in the reducer?

Question

I am using the aurelia-store state management library for managing state. This question is not specific to Aurelia store, but actually to redux best practices in general since Aurelia store is very much the same thing.

I have an action that fetches unit updates from an API like so:

export const fetchNewUnits = async (state: State): Promise<State> => {
  const fetchedUnits = await apiClient.getUnitsMarkers();

  // no new updates so don't trigger change in units
  // IS THIS ACCEPTABLE?
  if (fetchedUnits.length === 0) {
    return {
      ...state,
      highwaterMark: new Date()
    };
  }

  const units: UnitMarker[] = state.units.slice();

  _.forEach(fetchedUnits, (newUnit) => {
    // look for matching unit in store
    const idx = _.findIndex(units, {
      imei: newUnit.imei
    });

    // unit was found in store, do update
    if (idx !== -1) {
      // replace the unit in the store
      const replacement = new UnitMarker({...newUnit});
      units.splice(idx, 1, replacement);
    }
  });

  // OR SHOULD I ALWAYS DEEP COPY THE ARRAY REFERENCE AND IT'S OBJECTS
  return {
    ...state,
    highwaterMark: new Date(),
    units: [...units]
  };
};

If I do not have any unit changes (i.e. my store is up to date) can I simply return the state with the spread operator as shown in the first return statement? Is this fine since I did not modify the objects?

Or do I always have to do deep replacements such as:

return {
    ...state,
    highwaterMark: new Date(),
    units: [...state.units]
  };

even if the objects in the array did not change?

Answer 1

The reason why you’re supposed to create a new object is because React components check for prop changes in order to know when to re-render. If you simply modify an object and pass it in as a prop again, React won’t know that something changed and will fail to rerender.

So in your case, the question is: do you want to rerender, or not? If you don’t, returning the same object is fine and a simple ‘return state’ will let React know that no rerenders are necessary.

See: Why is the requirement to always return new object with new internal references