Enhancement: Memoize sketches list and pagination selectors in SketchList.jsx to prevent redundant rendering cycles

Increasing Access

Optimizing the performance of the editor dashboard reduces local CPU and memory usage, ensuring that the p5.js Web Editor remains highly responsive and functional on low-spec hardware (such as older laptops or educational Chromebooks often used in classrooms).

Feature enhancement details

Rationale

In SketchList.jsx, the mapStateToProps function currently uses inline fallback values:

sketches: state.sketches.projects ?? [],
paginationMeta: state.sketches.metadata ?? {
  page: 1,
  totalPages: 1,
  totalProjects: 0,
  limit: 10,
  hasPagination: true
}

When state.sketches.projects or state.sketches.metadata is undefined or null, these fallback expressions create new array/object references whenever mapStateToProps runs.

Since mapStateToProps can be evaluated frequently as Redux state changes, including during editor interactions, these unstable references can cause unnecessary prop changes and potentially trigger redundant rendering in SketchList and its child components.

Using memoized selectors with stable module-level default values would provide referentially stable results and avoid this unnecessary work.

Proposed Solution

Expose memoized selectors using @reduxjs/toolkit's createSelector inside client/modules/IDE/selectors/project.js:

const DEFAULT_SKETCHES = [];

const DEFAULT_PAGINATION_META = {
  page: 1,
  totalPages: 1,
  totalProjects: 0,
  limit: 10,
  hasPagination: true
};

export const selectSketchesList = createSelector(
  (state) => state.sketches.projects,
  (projects) => projects ?? DEFAULT_SKETCHES
);

export const selectSketchesPaginationMeta = createSelector(
  (state) => state.sketches.metadata,
  (metadata) => metadata ?? DEFAULT_PAGINATION_META
);

Then import and use these selectors in SketchList.jsx within mapStateToProps.

This would ensure that the fallback values maintain stable references instead of being recreated whenever the underlying values are unavailable, reducing unnecessary prop changes and rendering work.

Expected Impact

• Stable references for fallback values.
• Fewer unnecessary component updates.
• Reduced rendering overhead in the editor dashboard.
• Better performance on lower-spec devices.
• No change to the existing behavior or data flow.

Start by reading client/modules/IDE/selectors/project.js and SketchList.jsx, focusing on mapStateToProps and the existing sketches and pagination state access. Add the memoized selectors and use them in SketchList.jsx; done means fallback references remain stable while existing data flow and behavior are unchanged.