Skip to content

Commit ceb0a54

Browse files
javachefacebook-github-bot
authored andcommitted
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
1 parent f40976c commit ceb0a54

File tree

1 file changed

+7
-3
lines changed

1 file changed

+7
-3
lines changed

Libraries/Lists/VirtualizedListContext.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -142,10 +142,14 @@ export function VirtualizedListCellContextProvider({
142142
cellKey: string,
143143
children: React.Node,
144144
}): React.Node {
145-
const context = useContext(VirtualizedListContext);
145+
// Avoid setting a newly created context object if the values are identical.
146+
const currContext = useContext(VirtualizedListContext);
147+
const context = useMemo(
148+
() => (currContext == null ? null : {...currContext, cellKey}),
149+
[currContext, cellKey],
150+
);
146151
return (
147-
<VirtualizedListContext.Provider
148-
value={context == null ? null : {...context, cellKey}}>
152+
<VirtualizedListContext.Provider value={context}>
149153
{children}
150154
</VirtualizedListContext.Provider>
151155
);

0 commit comments

Comments
 (0)