Make list render faster

Author: samrith-s

src/screens/List/List.tsx

@@ -6,10 +6,9 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { groupData } from "./group-data";
 
-import { renderItem, renderSectionHeader } from "./renderItem";
+import { keyExtractor, renderItem, renderSectionHeader } from "./renderItem";
 
-import { Box } from "~/components/Box";
-import { Bold, Text } from "~/components/Text";
+import { Bold } from "~/components/Text";
 import { GlobalStyles, Palette } from "~/styles";
 
 export function List() {
@@ -25,6 +24,7 @@ export function List() {
 			<SectionList
 				sections={data}
 				renderItem={renderItem}
+				keyExtractor={keyExtractor}
 				renderSectionHeader={renderSectionHeader}
 				style={GlobalStyles.container}
 				contentContainerStyle={styles.list}

src/screens/List/ListHeader.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo } from "react";
 
 import { StyleSheet } from "react-native";
 
@@ -13,17 +13,20 @@ export type ListHeaderProps = {
 	data: SectionData;
 };
 
-export function ListHeader({ data }: ListHeaderProps) {
-	return (
-		<BlurView
-			tint="dark"
-			intensity={50}
-			style={styles.container}
-		>
-			<Bold style={styles.text}>{data?.title}</Bold>
-		</BlurView>
-	);
-}
+export const ListHeader = memo(
+	function ListHeader({ data }: ListHeaderProps) {
+		return (
+			<BlurView
+				tint="dark"
+				intensity={50}
+				style={styles.container}
+			>
+				<Bold style={styles.text}>{data?.title}</Bold>
+			</BlurView>
+		);
+	},
+	(prev, next) => prev.data.title !== next.data.title
+);
 
 const styles = StyleSheet.create({
 	container: {

src/screens/List/ListItem.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo } from "react";
 
 import { StyleSheet, View } from "react-native";
 
@@ -18,7 +18,7 @@ export type ListItemProps = {
 	index: number;
 };
 
-export function ListItem({
+export const ListItem = memo(function ListItem({
 	data: { date, time, grade, color },
 	index,
 }: ListItemProps) {
@@ -34,15 +34,14 @@ export function ListItem({
 			<Text style={styles.textTime}>{format(date, "hh:mm aaa")}</Text>
 		</View>
 	);
-}
+});
 
 const styles = StyleSheet.create({
 	item: {
 		alignItems: "center",
 		flexDirection: "row",
 		gap: 10,
 		justifyContent: "space-between",
-		marginTop: 10,
 		padding: 20,
 	},
 	left: {

src/screens/List/renderItem.tsx

@@ -6,6 +6,10 @@ import { type Entry, type SectionData } from "./List.interface";
 import { ListHeader } from "./ListHeader";
 import { ListItem } from "./ListItem";
 
+export function keyExtractor(item: Entry, index: number) {
+	return `${item.date.toString()}-${index}`;
+}
+
 export function renderItem({ item, index }: ListRenderItemInfo<Entry>) {
 	return (
 		<ListItem