Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add function based components example for Flat list optimisation #2955

Merged
merged 7 commits into from
Feb 4, 2022
Merged

Add function based components example for Flat list optimisation #2955

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c65c3ea
Add function based components example for Flat list optimisation
DibyajyotiMishra Feb 3, 2022
484b0fd
Optimizing Flatlist Configuration docs [Add Tabs for class and funct…
DibyajyotiMishra Feb 4, 2022
10fcb94
fix: linting issues
DibyajyotiMishra Feb 4, 2022
7185037
Update optimizing-flatlist-configuration.md
DibyajyotiMishra Feb 4, 2022
8c83324
fix: linting issues
DibyajyotiMishra Feb 4, 2022
ffb2aee
fix: linting issues
DibyajyotiMishra Feb 4, 2022
b46f752
Update docs/optimizing-flatlist-configuration.md
Simek Feb 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions docs/optimizing-flatlist-configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.)
Expand Down Expand Up @@ -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>);

Expand All @@ -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>