From ba50a5a834ea13d891072b2eb6fa2191d2b1cf96 Mon Sep 17 00:00:00 2001
From: DIBYAJYOTI MISHRA <dibyajyotimishra14@gmail.com>
Date: Fri, 4 Feb 2022 16:20:01 +0530
Subject: [PATCH] Add function based components example for Flat list
 optimisation (#2955)

---
 docs/optimizing-flatlist-configuration.md | 27 +++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/docs/optimizing-flatlist-configuration.md b/docs/optimizing-flatlist-configuration.md
index 2301dbf4d1e..becebcc0a3a 100644
--- a/docs/optimizing-flatlist-configuration.md
+++ b/docs/optimizing-flatlist-configuration.md
@@ -3,6 +3,8 @@ id: optimizing-flatlist-configuration
 title: Optimizing Flatlist Configuration
 ---
 
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
 ## Terms
 
 - **VirtualizedList:** The component behind `FlatList` (React Native's implementation of the [`Virtual List`](https://bvaughn.github.io/react-virtualized/#/components/List) concept.)
@@ -123,6 +125,9 @@ You can also use a `key` prop in your item component.
 
 Move out the `renderItem` function to the outside of render function, so it won't recreate itself each time render function called.
 
+<Tabs groupId="syntax" defaultValue={constants.defaultSyntax} values={constants.syntax}>
+<TabItem value="classical">
+
 ```jsx
 renderItem = ({ item }) => (<View key={item.key}><Text>{item.title}</Text></View>);
 
@@ -136,4 +141,26 @@ render(){
 
   // ...
 }
+
+```
+
+</TabItem>
+<TabItem value="functional">
+
+```jsx
+const renderItem = ({ item }) => (
+   <View key={item.key}>
+      <Text>{item.title}</Text>
+   </View>
+ );
+
+return (
+  // ...
+
+  <FlatList data={items} renderItem={renderItem} />;
+  // ...
+);
 ```
+
+</TabItem>
+</Tabs>