The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Lists and Keys

Next ►
►

In this section, we will explore how to render lists in React Native and understand the importance of keys in list items. Lists are a common UI pattern, and handling them efficiently is crucial for performance and user experience.

Key Concepts

  1. Rendering Lists: How to display a list of items using components like FlatList and SectionList.
  2. Keys: The role of keys in identifying list items and ensuring efficient updates.
  3. Performance Optimization: Techniques to optimize list rendering for better performance.

Rendering Lists

FlatList

FlatList is a performant interface for rendering simple, flat lists of data. It only renders items that are currently visible on the screen, which helps in optimizing performance.

Example

import React from 'react';
import { FlatList, Text, View, StyleSheet } from 'react-native';

const DATA = [
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  { id: '3', title: 'Item 3' },
  // Add more items as needed
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  return (
    <FlatList
      data={DATA}
      renderItem={({ item }) => <Item title={item.title} />}
      keyExtractor={item => item.id}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

Explanation

  • DATA: An array of objects representing the list items.
  • Item Component: A functional component that renders each item.
  • FlatList: The main component that takes data, renderItem, and keyExtractor as props.
    • data: The array of items to be rendered.
    • renderItem: A function that returns the component to render for each item.
    • keyExtractor: A function that returns a unique key for each item.

SectionList

SectionList is used for rendering lists with section headers, useful for grouped data.

Example

import React from 'react';
import { SectionList, Text, View, StyleSheet } from 'react-native';

const DATA = [
  {
    title: 'Main Dishes',
    data: ['Pizza', 'Burger', 'Risotto'],
  },
  {
    title: 'Sides',
    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
  },
  {
    title: 'Drinks',
    data: ['Water', 'Coke', 'Beer'],
  },
  {
    title: 'Desserts',
    data: ['Cheese Cake', 'Ice Cream'],
  },
];

const App = () => {
  return (
    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
      renderSectionHeader={({ section: { title } }) => (
        <Text style={styles.header}>{title}</Text>
      )}
    />
  );
};

const styles = StyleSheet.create({
  header: {
    fontSize: 32,
    backgroundColor: '#fff',
  },
  item: {
    padding: 20,
    fontSize: 24,
  },
});

export default App;

Explanation

  • DATA: An array of objects, each representing a section with a title and data.
  • SectionList: The main component that takes sections, renderItem, renderSectionHeader, and keyExtractor as props.
    • sections: The array of section objects.
    • renderItem: A function that returns the component to render for each item.
    • renderSectionHeader: A function that returns the component to render for each section header.
    • keyExtractor: A function that returns a unique key for each item.

Keys

Keys help React identify which items have changed, are added, or are removed. They should be given to the elements inside the array to give the elements a stable identity.

Importance of Keys

  • Performance: Helps React optimize rendering by reusing existing elements.
  • Stability: Ensures that the component state is preserved across re-renders.

Common Mistakes

  • Using Index as Key: Avoid using array index as a key, as it can lead to issues when the list order changes.
  • Non-Unique Keys: Ensure that keys are unique among siblings.

Practical Exercise

Task

Create a FlatList that displays a list of users with their names and ages. Ensure that each item has a unique key.

Solution

import React from 'react';
import { FlatList, Text, View, StyleSheet } from 'react-native';

const USERS = [
  { id: '1', name: 'John Doe', age: 28 },
  { id: '2', name: 'Jane Smith', age: 34 },
  { id: '3', name: 'Sam Johnson', age: 45 },
  // Add more users as needed
];

const UserItem = ({ name, age }) => (
  <View style={styles.item}>
    <Text style={styles.name}>{name}</Text>
    <Text style={styles.age}>{age} years old</Text>
  </View>
);

const App = () => {
  return (
    <FlatList
      data={USERS}
      renderItem={({ item }) => <UserItem name={item.name} age={item.age} />}
      keyExtractor={item => item.id}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#e0f7fa',
    padding: 20,
    marginVertical: 8,
  },
  name: {
    fontSize: 24,
  },
  age: {
    fontSize: 18,
  },
});

export default App;

Explanation

  • USERS: An array of user objects with id, name, and age.
  • UserItem Component: A functional component that renders each user's name and age.
  • FlatList: Renders the list of users with a unique key for each item.

Conclusion

In this section, we learned how to render lists using FlatList and SectionList, and the importance of keys in list items. We also covered practical examples and exercises to reinforce these concepts. Understanding and implementing these techniques will help you create efficient and performant list-based UIs in React Native.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved