Inefficient State Management in Redux Store (client/store.js)

[yashodipmore]

Increasing Access

Unsure (Community input on how this impacts accessibility is welcome.)

Feature enhancement details

Currently, the Redux store in client/store.js is not optimally structured, leading to unnecessary re-renders, excessive memory usage, and inefficient state updates. This impacts the overall performance of the p5.js Web Editor.

Issues Identified:
Overly Large Single Store Slice:

Some state variables are combined in a single slice, causing redundant updates when only a part of the state changes.

Unnecessary State Persistence:

Certain temporary values are stored in Redux when they could be managed using React’s local state.

Inefficient Selectors and State Subscriptions:

Components subscribe to the entire store instead of selecting only necessary values, causing unnecessary renders.

Proposed Solution:
Refactor the Redux store by splitting large slices into smaller, more manageable ones.

Move transient UI states (e.g., modal open/close) to local component state where possible.

Optimize selectors to prevent unnecessary component re-renders.

Implement useMemo and useCallback to prevent excessive computations.

Expected Benefits:
✅ Improved performance and reduced unnecessary re-renders.
✅ More maintainable and scalable Redux structure.
✅ Enhanced developer experience for future contributors.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[raclim]

Thanks for opening this!

We do currently have an issue (2042) open dedicated to migrating from using Redux to Redux Toolkit altogether, which we currently have a few open PRs already for. To consolidate and organize issues, I'm going to close this one but please feel free to check out a few of the PRs that are open!