From c745ae323f925fcf952ef7754208d9ed22104078 Mon Sep 17 00:00:00 2001
From: Nedunchezhiyan-M <gokulmaran2002@gmail.com>
Date: Wed, 8 Apr 2026 11:34:59 +0530
Subject: [PATCH] Fix stale leadingItem/trailingItem in ItemWithSeparator when
 cell is reused

ItemWithSeparator stores leadingSeparatorProps and separatorProps in local
state, initialised once from the incoming props. When the virtualised list
recycles the same cell component for a different data row (e.g. after
scrolling), the component re-renders with new item/section props but the
state is never updated, so the separator keeps the stale values from the
previous row. This can expose undefined leadingItem or trailingItem values
at section boundaries, as reported in #55708.

The fix adds a useEffect that resets both separator prop objects whenever
any of the relevant incoming props change, keeping the state in sync with
the current row without disturbing any external highlight/updateProps calls
that happen in the separate useEffect below.
---
 .../Lists/VirtualizedSectionList.js           | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/packages/virtualized-lists/Lists/VirtualizedSectionList.js b/packages/virtualized-lists/Lists/VirtualizedSectionList.js
index 55a63f8866ff..fc1d35014632 100644
--- a/packages/virtualized-lists/Lists/VirtualizedSectionList.js
+++ b/packages/virtualized-lists/Lists/VirtualizedSectionList.js
@@ -551,6 +551,30 @@ function ItemWithSeparator<ItemT>(
     trailingSection: props.trailingSection,
   });
 
+  useEffect(() => {
+    setLeadingSeparatorProps({
+      leadingItem: props.leadingItem,
+      leadingSection: props.leadingSection,
+      section: props.section,
+      trailingItem: props.item,
+      trailingSection: props.trailingSection,
+    });
+    setSeparatorProps({
+      leadingItem: props.item,
+      leadingSection: props.leadingSection,
+      section: props.section,
+      trailingItem: props.trailingItem,
+      trailingSection: props.trailingSection,
+    });
+  }, [
+    props.item,
+    props.leadingItem,
+    props.leadingSection,
+    props.section,
+    props.trailingItem,
+    props.trailingSection,
+  ]);
+
   useEffect(() => {
     setSelfHighlightCallback(cellKey, setSeparatorHighlighted);
     // $FlowFixMe[incompatible-type]