LibreChat/client
Danny Avila 7181174c3b
🖼️ fix: Message Icon Flickering from Context-Triggered Re-renders (#12489)
* perf: add custom memo comparator to MessageIcon for stable re-render gating

MessageIcon receives full `agent` and `assistant` objects as props from
useMessageActions, which recomputes them when AgentsMapContext or
AssistantsMapContext update (e.g., react-query refetch on window focus).
These context-triggered re-renders bypass MessageRender's React.memo,
producing new object references for agent/assistant even when the
underlying data is unchanged. The default shallow comparison in
MessageIcon's memo then fails, causing unnecessary re-renders that
manifest as visible icon flickering.

Add arePropsEqual comparator that checks only the fields MessageIcon
actually uses (name, avatar filepath, metadata avatar) instead of
object identity, so the component correctly bails out when icon-relevant
data hasn't changed.

* refactor: export arePropsEqual, drop redundant useMemos, add JSDoc

- Export arePropsEqual so it can be tested in isolation
- Add JSDoc documenting which fields are intentionally omitted (id)
  and why iconData uses reference equality
- Replace five trivial useMemo calls (agent?.name ?? '', etc.) with
  direct computed values — the custom comparator already gates
  re-renders, so these memos only add closure/dep-array overhead
  without ever providing cache hits
- Remove unused React import

* test: add unit tests for MessageIcon arePropsEqual comparator

Exercise the custom memo comparator to ensure:
- New object references with same display fields are treated as equal
- Changed name or avatar filepath triggers re-render
- iconData reference change triggers re-render
- undefined→defined agent with undefined fields is treated as equal

* fix: replace nested ternary with if-else for eslint compliance

* test: add comment on subtle equality invariant and defined→undefined case

* perf: compare iconData by field values instead of reference

iconData is a useMemo'd object from the parent, but comparing by
reference still causes unnecessary re-renders when the parent
recomputes the memo with identical primitive values. Compare all
five fields individually (endpoint, model, iconURL, modelLabel,
isCreatedByUser) for consistency with how agent/assistant are handled.
2026-03-31 18:24:18 -04:00
..
public 🎨 chore: Update Agent Tool with new SVG assets (#12065) 2026-03-04 09:28:19 -05:00
scripts 🔧 refactor: Build Process and Static Asset Handling (#7605) 2025-05-28 11:48:04 -04:00
src 🖼️ fix: Message Icon Flickering from Context-Triggered Re-renders (#12489) 2026-03-31 18:24:18 -04:00
test 🔐 feat: Granular Role-based Permissions + Entra ID Group Discovery (#7804) 2025-08-13 16:24:17 -04:00
babel.config.cjs chore: Remove Unused Dependencies 🧹 (#939) 2023-09-14 15:12:22 -04:00
check_updates.sh 🔧 fix: Resolve Proper Dependencies to fix Application Error (#2488) 2024-04-22 12:52:30 -04:00
index.html 🌐 feat: Add support to SubDirectory hosting (#9155) 2025-08-27 02:00:18 -04:00
jest.config.cjs 🧩 feat: Redesign Tool Call UI with Contextual Icons, Smart Grouping, and Rich Output Rendering (#12163) 2026-03-25 12:31:39 -04:00
nginx.conf 📬 docs: Add Forwarded Headers to Nginx SSL Proxy Template (#12379) 2026-03-25 13:04:19 -04:00
package.json 📦 chore: bump dependabot packages (#12487) 2026-03-31 13:36:20 -04:00
postcss.config.cjs refactor: Settings/Presets UI Restructure, convert many files to TS (#740) 2023-08-04 13:56:44 -04:00
tailwind.config.cjs style(MCP): Enhance dialog accessibility and styling consistency (#11585) 2026-02-11 22:08:40 -05:00
tsconfig.json 🖼️ style: Improve Marketplace & Sharing Dialog UI 2025-08-13 16:24:24 -04:00
vite.config.ts 🧩 feat: Redesign Tool Call UI with Contextual Icons, Smart Grouping, and Rich Output Rendering (#12163) 2026-03-25 12:31:39 -04:00