From 369672d5c50be43e7119ba34a1015cc631a2b249 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=95=D0=B3=D0=BE=D1=80=D0=B8=D0=BA?=
<86266852+Huinko@users.noreply.github.com>
Date: Mon, 24 Apr 2023 23:10:45 +0500
Subject: [PATCH 1/3] Update FlatList Optimization Guide for FCs
---
docs/optimizing-flatlist-configuration.md | 20 +++++++++++++++-----
1 file changed, 15 insertions(+), 5 deletions(-)
diff --git a/docs/optimizing-flatlist-configuration.md b/docs/optimizing-flatlist-configuration.md
index f8c03ec0095..35751e94a5f 100644
--- a/docs/optimizing-flatlist-configuration.md
+++ b/docs/optimizing-flatlist-configuration.md
@@ -93,15 +93,25 @@ The more complex your components are, the slower they will render. Try to avoid
The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.
-### Use shouldComponentUpdate
+### Use Memo()
-Implement update verification to your components. React's `PureComponent` implement a [`shouldComponentUpdate`](https://reactjs.org/docs/react-component.html#shouldcomponentupdate) with shallow comparison. This is expensive here because it needs to check all your props. If you want a good bit-level performance, create the strictest rules for your list item components, checking only props that could potentially change. If your list is basic enough, you could even use
+`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.
```tsx
-shouldComponentUpdate() {
- return false
-}
+import React, { memo } from 'react';
+import { View, Text } from 'react-native';
+
+const MyListItem = memo(({ title }) => (
+
+ {title}
+
+), (prevProps, nextProps) => {
+ return prevProps.title === nextProps.title;
+});
+
+export default MyListItem;
```
+In this example, we have determined that MyListItem should be re-rendered only when the title changes. We passed the comparison function as the second argument to React.memo() so that the component is re-rendered only when the specified prop is changed. If the comparison function returns true, the component will not be re-rendered.
### Use cached optimized images
From b256a0cddda8d25ec402502dcaf4068558d0d639 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=95=D0=B3=D0=BE=D1=80=D0=B8=D0=BA?=
<86266852+Huinko@users.noreply.github.com>
Date: Mon, 24 Apr 2023 18:33:46 +0000
Subject: [PATCH 2/3] fix lint
---
docs/optimizing-flatlist-configuration.md | 24 +++++++++++++----------
1 file changed, 14 insertions(+), 10 deletions(-)
diff --git a/docs/optimizing-flatlist-configuration.md b/docs/optimizing-flatlist-configuration.md
index 35751e94a5f..7e57fea0b5d 100644
--- a/docs/optimizing-flatlist-configuration.md
+++ b/docs/optimizing-flatlist-configuration.md
@@ -98,19 +98,23 @@ The heavier your components are, the slower they render. Avoid heavy images (use
`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.
```tsx
-import React, { memo } from 'react';
-import { View, Text } from 'react-native';
-
-const MyListItem = memo(({ title }) => (
-
- {title}
-
-), (prevProps, nextProps) => {
- return prevProps.title === nextProps.title;
-});
+import React, {memo} from 'react';
+import {View, Text} from 'react-native';
+
+const MyListItem = memo(
+ ({title}: {title: string}) => (
+
+ {title}
+
+ ),
+ (prevProps, nextProps) => {
+ return prevProps.title === nextProps.title;
+ },
+);
export default MyListItem;
```
+
In this example, we have determined that MyListItem should be re-rendered only when the title changes. We passed the comparison function as the second argument to React.memo() so that the component is re-rendered only when the specified prop is changed. If the comparison function returns true, the component will not be re-rendered.
### Use cached optimized images
From f7c7c67c0ee40b51e9fbd3a1d10c44847b099966 Mon Sep 17 00:00:00 2001
From: Nick Gerleman
Date: Fri, 7 Jul 2023 19:24:38 -0700
Subject: [PATCH 3/3] Update docs/optimizing-flatlist-configuration.md
---
docs/optimizing-flatlist-configuration.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/optimizing-flatlist-configuration.md b/docs/optimizing-flatlist-configuration.md
index 7e57fea0b5d..3d7e60a4188 100644
--- a/docs/optimizing-flatlist-configuration.md
+++ b/docs/optimizing-flatlist-configuration.md
@@ -93,7 +93,7 @@ The more complex your components are, the slower they will render. Try to avoid
The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.
-### Use Memo()
+### Use `memo()`
`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.