langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-20 19:50:06 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #29263] perf: optimize marketplace card re-renders with memoization #32349

New Issue
Closed
opened 2026-02-21 20:51:14 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:51:14 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/langgenius/dify/pull/29263

State: closed
Merged: Yes

Summary

Fixes #29262

This PR optimizes the performance of marketplace plugin/provider cards by preventing excessive re-renders through proper React memoization techniques.

Performance Issue:

  • Total interaction time: 247ms (React: 66ms, Other: 181ms)
  • 88 ProviderCard instances rendering on every parent update
  • 176 Button re-renders (2 per card)
  • 88 DownloadCount re-renders

Root Cause:

  1. Components not wrapped with React.memo()
  2. Unstable object references created on every render: { language: locale, theme }
  3. Cascading re-renders triggering hook effects (useTheme, useTranslation, useI18N) 88 times

Solution:

  • Wrap ProviderCard with React.memo() to prevent re-renders when props haven't changed
  • Use useMemo() for marketplace link params to stabilize object references
  • Wrap DownloadCount with React.memo() for consistency

Expected Impact:

  • Reduces component renders from 88 to near-zero (when props are stable)
  • Expected 70-90% reduction in "other time" (hook effects execution)
  • Smoother UI interactions when browsing marketplace

Technical Details:

  • Follows React best practices for object prop memoization (see frontend development guidelines)
  • No behavioral changes - pure performance optimization
  • Type-safe with full TypeScript support

Screenshots

Performance profiling shows the issue - this PR addresses the excessive re-renders:

  • Before: 88 ProviderCard renders, 176 Button renders, 181ms in hook effects
  • After: Near-zero re-renders when props are stable

Checklist

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods
**Original Pull Request:** https://github.com/langgenius/dify/pull/29263 **State:** closed **Merged:** Yes --- ## Summary Fixes #29262 This PR optimizes the performance of marketplace plugin/provider cards by preventing excessive re-renders through proper React memoization techniques. **Performance Issue:** - Total interaction time: 247ms (React: 66ms, Other: 181ms) - 88 ProviderCard instances rendering on every parent update - 176 Button re-renders (2 per card) - 88 DownloadCount re-renders **Root Cause:** 1. Components not wrapped with `React.memo()` 2. Unstable object references created on every render: `{ language: locale, theme }` 3. Cascading re-renders triggering hook effects (useTheme, useTranslation, useI18N) 88 times **Solution:** - Wrap ProviderCard with `React.memo()` to prevent re-renders when props haven't changed - Use `useMemo()` for marketplace link params to stabilize object references - Wrap DownloadCount with `React.memo()` for consistency **Expected Impact:** - Reduces component renders from 88 to near-zero (when props are stable) - Expected 70-90% reduction in "other time" (hook effects execution) - Smoother UI interactions when browsing marketplace **Technical Details:** - Follows React best practices for object prop memoization (see frontend development guidelines) - No behavioral changes - pure performance optimization - Type-safe with full TypeScript support ## Screenshots Performance profiling shows the issue - this PR addresses the excessive re-renders: - Before: 88 ProviderCard renders, 176 Button renders, 181ms in hook effects - After: Near-zero re-renders when props are stable ## Checklist - [ ] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!) - [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change. - [x] I've updated the documentation accordingly. - [x] I ran `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:51:14 -05:00
yindo closed this issue 2026-02-21 20:51:14 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#32349
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?