Skip to content

perf: add useCallback and useMemo to DeveloperEngagementDashboard for… - #99

Open
srajang1805 wants to merge 1 commit into
seetadev:mainfrom
srajang1805:perf/use-callback-memo
Open

srajang1805 wants to merge 1 commit into
seetadev:mainfrom
srajang1805:perf/use-callback-memo

Conversation

@srajang1805

@srajang1805 srajang1805 commented May 25, 2026 •

Copy link
Copy Markdown

Description

#68
This PR improves dashboard rendering performance by reducing unnecessary function re-creations and repeated data processing during component re-renders.

The primary focus of the changes is optimizing expensive computations and stabilizing callback references to improve rendering efficiency, especially when working with larger CSV datasets or frequently updating dashboard state.

Problem Solved

Previously:

  • CSV processing logic was being recomputed on every render
  • Callback functions were recreated repeatedly
  • Effects depending on those callbacks could trigger more often than necessary
  • Dashboard state logging utilities caused unstable dependencies
  • Larger datasets could lead to avoidable render overhead and reduced responsiveness

This PR addresses those issues by memoizing expensive calculations and stabilizing function references using React hooks.


Changes

Performance Optimizations

  • Added useCallback to loadCSVData

    • Prevents function re-creation on every render
    • Stabilizes dependencies for downstream hooks/effects
  • Added useMemo for processed dataset computation

    • Prevents repeated CSV transformation and parsing work
    • Recomputes only when source dependencies change
  • Added useCallback to logDashboardState

    • Avoids unnecessary recreation of logging/debug utilities
    • Reduces effect dependency churn
  • Updated useEffect dependency arrays

    • Switched effects to use memoized callback references
    • Helps avoid unintended reruns and unnecessary state updates

Codebase Updates

  • Imported useCallback and useMemo from React
  • Refactored related hook usage to align with React memoization best practices
  • Improved hook dependency consistency and component stability

Testing / Validation

  • Verified hook dependency integrity after memoization changes
  • Confirmed processed data updates correctly when source inputs change
  • Confirmed dashboard functionality remains unchanged after optimization refactor

Screenshots / Demo (if applicable)

N/A — changes are internal performance optimizations with no direct UI modifications.


Additional Notes

  • No breaking API or UI changes introduced
  • Functional behavior remains unchanged; this PR focuses solely on render and computation efficiency
  • Performance improvements are expected to be more noticeable with larger CSV datasets or frequent dashboard state updates
  • Memoization was scoped carefully to avoid stale state or incorrect dependency behavior

Checklist

  • I have tested this code
  • I have added necessary documentation
  • I have linked relevant issue(s)
  • I followed the code style of the project
  • I reviewed my own code

… performance

- Added useCallback to loadCSVData function to prevent re-creation on every render
- Added useMemo to processedData calculation to prevent reprocessing on every render
- Added useCallback to logDashboardState to prevent re-creation of logging function
- Updated useEffect dependencies to use the memoized callbacks
- Imported useCallback and useMemo from react
@vercel

vercel Bot commented May 25, 2026

Copy link
Copy Markdown

@srajang1805 is attempting to deploy a commit to the SEETA's projects Team on Vercel.

A member of the Team first needs to authorize it.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant