fix: memoize formatRelativeTime in thread list to prevent unnecessary re-renders#1494
fix: memoize formatRelativeTime in thread list to prevent unnecessary re-renders#1494okxint wants to merge 1 commit into
Conversation
… re-renders ThreadListItemComponent is wrapped in memo(), but formatRelativeTime(new Date(thread.updatedAt)) was called inline during render, creating a new Date on every parent re-render regardless of whether updatedAt changed. Wrap the call in useMemo keyed on thread.updatedAt so the date formatting only re-runs when the value actually changes.
|
@okxint is attempting to deploy a commit to the Rohan Verma's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
2 participants
ThreadListItemComponentis wrapped inmemo(), butformatRelativeTime(new Date(thread.updatedAt))was being called inline during render — creating a newDateobject and recomputing the formatted string on every parent re-render, even whenupdatedAthadn't changed.This wraps the call in
useMemokeyed onthread.updatedAt, so the formatting only runs when the timestamp actually changes.Changes:
useMemoto the React importformatRelativeTimeresult inThreadListItemComponentHigh-level PR Summary
This PR optimizes the
ThreadListItemComponentby memoizing theformatRelativeTimecomputation to prevent unnecessary re-renders. Previously, the component was creating a newDateobject and formatting the timestamp on every parent re-render, even when theupdatedAtvalue hadn't changed. The fix usesuseMemoto cache the formatted time string and only recompute it whenthread.updatedAtactually changes, improving rendering performance.⏱️ Estimated Review Time: 5-15 minutes
💡 Review Order Suggestion
surfsense_web/components/assistant-ui/thread-list.tsx