Chapter 4 of 12 ~18 min read

Components, State & High-Performance Lists

Replacing Cordova HTML tables/ul with FlatList & SectionList, view recycling, useState.

1. Why Cordova Lists Crashed vs FlatList

One of the biggest issues in Apache Cordova was rendering long lists (like contacts, transactions, or feeds). In a WebView, appending 5,000 DOM nodes consumes massive memory and leads to jank and browser tab crashes.

React Native's <FlatList> wraps native Android RecyclerView principles: it only renders items currently visible on screen, recycling cell views dynamically as the user scrolls.

Cordova HTML List

// Appending to DOM: heavy memory leak
const list = document.getElementById('userList');
users.forEach(user => {
  const item = document.createElement('li');
  item.className = 'user-item';
  item.innerHTML = `
    <h4>${user.name}</h4>
    <p>${user.email}</p>
  `;
  list.appendChild(item);
});

React Native FlatList

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

interface User { id: string; name: string; email: string; }

export function UserListView({ users }: { users: User[] }) {
  return (
    <FlatList
      data={users}
      keyExtractor={item => item.id}
      initialNumToRender={10}
      maxToRenderPerBatch={10}
      windowSize={5}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text style={styles.name}>{item.name}</Text>
          <Text style={styles.email}>{item.email}</Text>
        </View>
      )}
    />
  );
}

const styles = StyleSheet.create({
  item: { padding: 16, borderBottomWidth: 1, borderColor: '#e2e8f0' },
  name: { fontSize: 16, fontWeight: 'bold' },
  email: { fontSize: 14, color: '#64748b' }
});

Previous Chapter Next Chapter