From ceb0a546083509192c059cdd93d6aa379e38ef4e Mon Sep 17 00:00:00 2001
From: Pieter De Baets <pieterdb@fb.com>
Date: Tue, 26 Apr 2022 04:04:45 -0700
Subject: [PATCH] Memoize VirtualizedListCellContextProvider

Summary:
When a FlatList is nested inside another FlatList, it may be re-rendered whenever the outer FlatList renders. Apply the same optimization we already had in `VirtualizedListContextProvider` to avoid changing the context object if no values have changed.

Changelog: [General][Changed] - Optimized VirtualizedList context when used with nested lists

Reviewed By: genkikondo

Differential Revision: D35905952

fbshipit-source-id: 695253c85db2043d22e208ad94ecc7daa1455055
---
 Libraries/Lists/VirtualizedListContext.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/Libraries/Lists/VirtualizedListContext.js b/Libraries/Lists/VirtualizedListContext.js
index dec07c75f31b7c..d51a79244a0330 100644
--- a/Libraries/Lists/VirtualizedListContext.js
+++ b/Libraries/Lists/VirtualizedListContext.js
@@ -142,10 +142,14 @@ export function VirtualizedListCellContextProvider({
   cellKey: string,
   children: React.Node,
 }): React.Node {
-  const context = useContext(VirtualizedListContext);
+  // Avoid setting a newly created context object if the values are identical.
+  const currContext = useContext(VirtualizedListContext);
+  const context = useMemo(
+    () => (currContext == null ? null : {...currContext, cellKey}),
+    [currContext, cellKey],
+  );
   return (
-    <VirtualizedListContext.Provider
-      value={context == null ? null : {...context, cellKey}}>
+    <VirtualizedListContext.Provider value={context}>
       {children}
     </VirtualizedListContext.Provider>
   );