Description
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.