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

SectionList renders all items at once. #48258

Open
ponikar opened this issue Dec 13, 2024 · 6 comments
Open

SectionList renders all items at once. #48258

ponikar opened this issue Dec 13, 2024 · 6 comments
Labels
Component: SectionList Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project.

Comments

@ponikar
Copy link

ponikar commented Dec 13, 2024

Description

I found out section list invokes renderItem method for all the items even if there are not visible in the screen.
Here's the expo snack link: https://snack.expo.dev/7cjOb_kzYa8_8gcuW9i9s
If anyone can help understand why is it happening?

This is the basic code snippet

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

const GroceryInventory = () => {
  const groceryData = [
    {
      title: 'Fruits',
      data: Array(50).fill(2).map((_, index) => ({
        id: `fruit-${index}`, 
        name: `Fruit ${index}`, 
        price: `$${(Math.random() * 5).toFixed(2)}`
      }))
    },
    {
      title: 'Vegetables',
      data: Array(50).fill(2).map((_, index) => ({
        id: `vegetable-${index}`, 
        name: `Vegetable ${index}`, 
        price: `$${(Math.random() * 5).toFixed(2)}`
      }))
    },
    {
      title: 'Dairy',
      data: Array(50).fill(2).map((_, index) => ({
        id: `dairy-${index}`, 
        name: `Dairy ${index}`, 
        price: `$${(Math.random() * 5).toFixed(2)}`
      }))
    }
  ];

  const renderSectionHeader = ({ section: { title } }) => {

    console.log("RENDERING SECTION", title);
    
    return (
    <View style={styles.sectionHeader}>
      <Text style={styles.sectionHeaderText}>{title}</Text>
    </View>
  )
  };

  const renderItem = ({ item }) => {
    console.log("RENERING ITEEEM", item);
    
    return (
    <View style={styles.item}>
      <Text style={styles.itemName}>{item.name}</Text>
      <Text style={styles.itemPrice}>{item.price}</Text>
    </View>
  )
  };

  return (
    <SafeAreaView style={styles.container}>
      <SectionList
        sections={groceryData}
        keyExtractor={(item) => item.id}
        renderSectionHeader={renderSectionHeader}
        renderItem={renderItem}
        
        // Performance optimization props
        initialNumToRender={10} // Initially render 10 items
        maxToRenderPerBatch={10} // Render 10 items per batch
        windowSize={21} // Render items just outside of visible area
        
        // Optional: Improve performance with these additional props
        removeClippedSubviews={true} // Unmount components when outside of window 
        updateCellsBatchingPeriod={50} // Increase time between batch renders
        listKey="grocery-section-list"
        
        // Optional scroll performance improvements
        getItemLayout={(data, index) => ({
          length: 50, // Assuming a fixed item height
          offset: 50 * index,
          index,
        })}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5'
  },
  sectionHeader: {
    backgroundColor: '#e1e1e1',
    padding: 10,
  },
  sectionHeaderText: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  item: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
  itemName: {
    fontSize: 16,
  },
  itemPrice: {
    fontSize: 16,
    color: '#888',
  }
});

export default GroceryInventory;

Here's the output logs.

image

Steps to reproduce

Create a basic react native project with or without framework. Copy and paste the above code or just run the expo snack.

React Native Version

0.76.5

Affected Platforms

Runtime - iOS

Output of npx react-native info

info Fetching system and libraries information...
System:
  OS: macOS 15.0
  CPU: (10) arm64 Apple M1 Pro
  Memory: 132.58 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.12.2
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.22
    path: /usr/local/bin/yarn
  npm:
    version: 10.5.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/lib/ruby/gems/3.1.0/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.19072.14.2412.12360217
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 3.1.5
    path: /opt/homebrew/opt/[email protected]/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: latest
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.5
    wanted: 0.76.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

(NOBRIDGE) LOG  RENDERING SECTION Vegetables
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-0", "name": "Vegetable 0", "price": "$2.14"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-1", "name": "Vegetable 1", "price": "$4.02"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-2", "name": "Vegetable 2", "price": "$1.36"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-3", "name": "Vegetable 3", "price": "$1.35"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-4", "name": "Vegetable 4", "price": "$4.33"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-5", "name": "Vegetable 5", "price": "$1.82"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-6", "name": "Vegetable 6", "price": "$4.90"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-7", "name": "Vegetable 7", "price": "$3.02"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-8", "name": "Vegetable 8", "price": "$1.79"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-9", "name": "Vegetable 9", "price": "$0.78"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-10", "name": "Vegetable 10", "price": "$0.28"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-11", "name": "Vegetable 11", "price": "$3.23"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-12", "name": "Vegetable 12", "price": "$1.73"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-13", "name": "Vegetable 13", "price": "$4.34"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-14", "name": "Vegetable 14", "price": "$3.28"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-15", "name": "Vegetable 15", "price": "$4.03"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-16", "name": "Vegetable 16", "price": "$4.69"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-17", "name": "Vegetable 17", "price": "$4.05"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-18", "name": "Vegetable 18", "price": "$2.32"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-19", "name": "Vegetable 19", "price": "$0.38"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-20", "name": "Vegetable 20", "price": "$1.44"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-21", "name": "Vegetable 21", "price": "$3.06"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-22", "name": "Vegetable 22", "price": "$4.67"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-23", "name": "Vegetable 23", "price": "$2.10"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-24", "name": "Vegetable 24", "price": "$0.88"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-25", "name": "Vegetable 25", "price": "$2.51"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-26", "name": "Vegetable 26", "price": "$3.97"}
 (NOBRIDGE) LOG  RENDERING SECTION Fruits
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-0", "name": "Fruit 0", "price": "$2.21"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-1", "name": "Fruit 1", "price": "$0.12"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-2", "name": "Fruit 2", "price": "$0.86"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-3", "name": "Fruit 3", "price": "$3.05"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-4", "name": "Fruit 4", "price": "$2.40"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-5", "name": "Fruit 5", "price": "$2.69"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-6", "name": "Fruit 6", "price": "$4.87"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-7", "name": "Fruit 7", "price": "$4.58"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-8", "name": "Fruit 8", "price": "$3.64"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-9", "name": "Fruit 9", "price": "$2.69"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-10", "name": "Fruit 10", "price": "$3.99"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-11", "name": "Fruit 11", "price": "$1.44"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-12", "name": "Fruit 12", "price": "$3.67"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-13", "name": "Fruit 13", "price": "$3.73"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-14", "name": "Fruit 14", "price": "$4.76"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-15", "name": "Fruit 15", "price": "$1.54"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-16", "name": "Fruit 16", "price": "$1.17"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-17", "name": "Fruit 17", "price": "$4.97"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-18", "name": "Fruit 18", "price": "$2.23"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-19", "name": "Fruit 19", "price": "$4.14"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-20", "name": "Fruit 20", "price": "$3.28"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-21", "name": "Fruit 21", "price": "$2.17"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-22", "name": "Fruit 22", "price": "$4.34"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-23", "name": "Fruit 23", "price": "$4.97"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-24", "name": "Fruit 24", "price": "$4.11"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-25", "name": "Fruit 25", "price": "$3.96"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-26", "name": "Fruit 26", "price": "$4.03"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-27", "name": "Fruit 27", "price": "$0.41"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-28", "name": "Fruit 28", "price": "$1.12"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-29", "name": "Fruit 29", "price": "$3.70"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-30", "name": "Fruit 30", "price": "$1.91"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-31", "name": "Fruit 31", "price": "$2.81"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-32", "name": "Fruit 32", "price": "$4.60"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-33", "name": "Fruit 33", "price": "$2.93"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-34", "name": "Fruit 34", "price": "$2.89"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-35", "name": "Fruit 35", "price": "$1.59"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-36", "name": "Fruit 36", "price": "$0.13"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-37", "name": "Fruit 37", "price": "$3.78"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-38", "name": "Fruit 38", "price": "$1.91"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-39", "name": "Fruit 39", "price": "$0.63"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-40", "name": "Fruit 40", "price": "$3.96"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-41", "name": "Fruit 41", "price": "$1.34"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-42", "name": "Fruit 42", "price": "$4.30"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-43", "name": "Fruit 43", "price": "$1.20"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-44", "name": "Fruit 44", "price": "$2.81"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-45", "name": "Fruit 45", "price": "$3.79"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-46", "name": "Fruit 46", "price": "$3.32"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-47", "name": "Fruit 47", "price": "$4.30"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-48", "name": "Fruit 48", "price": "$0.13"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-49", "name": "Fruit 49", "price": "$3.66"}
 (NOBRIDGE) LOG  RENDERING SECTION Vegetables
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-0", "name": "Vegetable 0", "price": "$2.14"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-1", "name": "Vegetable 1", "price": "$4.02"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-2", "name": "Vegetable 2", "price": "$1.36"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-3", "name": "Vegetable 3", "price": "$1.35"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-4", "name": "Vegetable 4", "price": "$4.33"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-5", "name": "Vegetable 5", "price": "$1.82"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-6", "name": "Vegetable 6", "price": "$4.90"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-7", "name": "Vegetable 7", "price": "$3.02"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-8", "name": "Vegetable 8", "price": "$1.79"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-9", "name": "Vegetable 9", "price": "$0.78"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-10", "name": "Vegetable 10", "price": "$0.28"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-11", "name": "Vegetable 11", "price": "$3.23"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-12", "name": "Vegetable 12", "price": "$1.73"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-13", "name": "Vegetable 13", "price": "$4.34"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-14", "name": "Vegetable 14", "price": "$3.28"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-15", "name": "Vegetable 15", "price": "$4.03"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-16", "name": "Vegetable 16", "price": "$4.69"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-17", "name": "Vegetable 17", "price": "$4.05"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-18", "name": "Vegetable 18", "price": "$2.32"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-19", "name": "Vegetable 19", "price": "$0.38"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-20", "name": "Vegetable 20", "price": "$1.44"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-21", "name": "Vegetable 21", "price": "$3.06"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-22", "name": "Vegetable 22", "price": "$4.67"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-23", "name": "Vegetable 23", "price": "$2.10"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-24", "name": "Vegetable 24", "price": "$0.88"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-25", "name": "Vegetable 25", "price": "$2.51"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-26", "name": "Vegetable 26", "price": "$3.97"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-27", "name": "Vegetable 27", "price": "$3.25"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-28", "name": "Vegetable 28", "price": "$2.62"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-29", "name": "Vegetable 29", "price": "$4.50"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-30", "name": "Vegetable 30", "price": "$2.33"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-31", "name": "Vegetable 31", "price": "$4.01"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-32", "name": "Vegetable 32", "price": "$1.44"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-33", "name": "Vegetable 33", "price": "$1.01"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-34", "name": "Vegetable 34", "price": "$3.83"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-35", "name": "Vegetable 35", "price": "$4.89"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-36", "name": "Vegetable 36", "price": "$2.37"}
 (NOBRIDGE) LOG  RENDERING SECTION Fruits
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-0", "name": "Fruit 0", "price": "$2.21"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-1", "name": "Fruit 1", "price": "$0.12"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-2", "name": "Fruit 2", "price": "$0.86"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-3", "name": "Fruit 3", "price": "$3.05"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-4", "name": "Fruit 4", "price": "$2.40"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-5", "name": "Fruit 5", "price": "$2.69"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-6", "name": "Fruit 6", "price": "$4.87"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-7", "name": "Fruit 7", "price": "$4.58"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-8", "name": "Fruit 8", "price": "$3.64"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-9", "name": "Fruit 9", "price": "$2.69"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-10", "name": "Fruit 10", "price": "$3.99"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-11", "name": "Fruit 11", "price": "$1.44"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-12", "name": "Fruit 12", "price": "$3.67"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-13", "name": "Fruit 13", "price": "$3.73"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-14", "name": "Fruit 14", "price": "$4.76"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-15", "name": "Fruit 15", "price": "$1.54"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-16", "name": "Fruit 16", "price": "$1.17"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-17", "name": "Fruit 17", "price": "$4.97"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-18", "name": "Fruit 18", "price": "$2.23"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-19", "name": "Fruit 19", "price": "$4.14"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-20", "name": "Fruit 20", "price": "$3.28"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-21", "name": "Fruit 21", "price": "$2.17"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-22", "name": "Fruit 22", "price": "$4.34"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-23", "name": "Fruit 23", "price": "$4.97"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-24", "name": "Fruit 24", "price": "$4.11"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-25", "name": "Fruit 25", "price": "$3.96"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-26", "name": "Fruit 26", "price": "$4.03"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-27", "name": "Fruit 27", "price": "$0.41"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-28", "name": "Fruit 28", "price": "$1.12"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-29", "name": "Fruit 29", "price": "$3.70"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-30", "name": "Fruit 30", "price": "$1.91"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-31", "name": "Fruit 31", "price": "$2.81"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-32", "name": "Fruit 32", "price": "$4.60"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-33", "name": "Fruit 33", "price": "$2.93"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-34", "name": "Fruit 34", "price": "$2.89"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-35", "name": "Fruit 35", "price": "$1.59"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-36", "name": "Fruit 36", "price": "$0.13"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-37", "name": "Fruit 37", "price": "$3.78"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-38", "name": "Fruit 38", "price": "$1.91"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-39", "name": "Fruit 39", "price": "$0.63"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-40", "name": "Fruit 40", "price": "$3.96"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-41", "name": "Fruit 41", "price": "$1.34"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-42", "name": "Fruit 42", "price": "$4.30"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-43", "name": "Fruit 43", "price": "$1.20"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-44", "name": "Fruit 44", "price": "$2.81"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-45", "name": "Fruit 45", "price": "$3.79"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-46", "name": "Fruit 46", "price": "$3.32"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-47", "name": "Fruit 47", "price": "$4.30"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-48", "name": "Fruit 48", "price": "$0.13"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-49", "name": "Fruit 49", "price": "$3.66"}
 (NOBRIDGE) LOG  RENDERING SECTION Vegetables
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-0", "name": "Vegetable 0", "price": "$2.14"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-1", "name": "Vegetable 1", "price": "$4.02"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-2", "name": "Vegetable 2", "price": "$1.36"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-3", "name": "Vegetable 3", "price": "$1.35"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-4", "name": "Vegetable 4", "price": "$4.33"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-5", "name": "Vegetable 5", "price": "$1.82"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-6", "name": "Vegetable 6", "price": "$4.90"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-7", "name": "Vegetable 7", "price": "$3.02"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-8", "name": "Vegetable 8", "price": "$1.79"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-9", "name": "Vegetable 9", "price": "$0.78"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-10", "name": "Vegetable 10", "price": "$0.28"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-11", "name": "Vegetable 11", "price": "$3.23"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-12", "name": "Vegetable 12", "price": "$1.73"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-13", "name": "Vegetable 13", "price": "$4.34"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-14", "name": "Vegetable 14", "price": "$3.28"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-15", "name": "Vegetable 15", "price": "$4.03"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-16", "name": "Vegetable 16", "price": "$4.69"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-17", "name": "Vegetable 17", "price": "$4.05"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-18", "name": "Vegetable 18", "price": "$2.32"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-19", "name": "Vegetable 19", "price": "$0.38"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-20", "name": "Vegetable 20", "price": "$1.44"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-21", "name": "Vegetable 21", "price": "$3.06"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-22", "name": "Vegetable 22", "price": "$4.67"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-23", "name": "Vegetable 23", "price": "$2.10"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-24", "name": "Vegetable 24", "price": "$0.88"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-25", "name": "Vegetable 25", "price": "$2.51"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-26", "name": "Vegetable 26", "price": "$3.97"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-27", "name": "Vegetable 27", "price": "$3.25"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-28", "name": "Vegetable 28", "price": "$2.62"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-29", "name": "Vegetable 29", "price": "$4.50"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-30", "name": "Vegetable 30", "price": "$2.33"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-31", "name": "Vegetable 31", "price": "$4.01"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-32", "name": "Vegetable 32", "price": "$1.44"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-33", "name": "Vegetable 33", "price": "$1.01"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-34", "name": "Vegetable 34", "price": "$3.83"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-35", "name": "Vegetable 35", "price": "$4.89"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-36", "name": "Vegetable 36", "price": "$2.37"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-37", "name": "Vegetable 37", "price": "$3.89"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-38", "name": "Vegetable 38", "price": "$0.08"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-39", "name": "Vegetable 39", "price": "$1.78"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-40", "name": "Vegetable 40", "price": "$3.78"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-41", "name": "Vegetable 41", "price": "$3.30"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-42", "name": "Vegetable 42", "price": "$1.12"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-43", "name": "Vegetable 43", "price": "$0.19"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-44", "name": "Vegetable 44", "price": "$1.06"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-45", "name": "Vegetable 45", "price": "$3.32"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-46", "name": "Vegetable 46", "price": "$1.13"}
 (NOBRIDGE) LOG  RENDERING SECTION Fruits
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-0", "name": "Fruit 0", "price": "$2.21"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-1", "name": "Fruit 1", "price": "$0.12"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-2", "name": "Fruit 2", "price": "$0.86"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-3", "name": "Fruit 3", "price": "$3.05"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-4", "name": "Fruit 4", "price": "$2.40"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-5", "name": "Fruit 5", "price": "$2.69"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-6", "name": "Fruit 6", "price": "$4.87"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-7", "name": "Fruit 7", "price": "$4.58"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-8", "name": "Fruit 8", "price": "$3.64"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-9", "name": "Fruit 9", "price": "$2.69"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-10", "name": "Fruit 10", "price": "$3.99"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-11", "name": "Fruit 11", "price": "$1.44"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-12", "name": "Fruit 12", "price": "$3.67"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-13", "name": "Fruit 13", "price": "$3.73"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-14", "name": "Fruit 14", "price": "$4.76"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-15", "name": "Fruit 15", "price": "$1.54"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-16", "name": "Fruit 16", "price": "$1.17"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-17", "name": "Fruit 17", "price": "$4.97"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-18", "name": "Fruit 18", "price": "$2.23"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-19", "name": "Fruit 19", "price": "$4.14"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-20", "name": "Fruit 20", "price": "$3.28"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-21", "name": "Fruit 21", "price": "$2.17"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-22", "name": "Fruit 22", "price": "$4.34"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-23", "name": "Fruit 23", "price": "$4.97"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-24", "name": "Fruit 24", "price": "$4.11"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-25", "name": "Fruit 25", "price": "$3.96"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-26", "name": "Fruit 26", "price": "$4.03"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-27", "name": "Fruit 27", "price": "$0.41"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-28", "name": "Fruit 28", "price": "$1.12"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-29", "name": "Fruit 29", "price": "$3.70"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-30", "name": "Fruit 30", "price": "$1.91"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-31", "name": "Fruit 31", "price": "$2.81"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-32", "name": "Fruit 32", "price": "$4.60"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-33", "name": "Fruit 33", "price": "$2.93"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-34", "name": "Fruit 34", "price": "$2.89"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-35", "name": "Fruit 35", "price": "$1.59"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-36", "name": "Fruit 36", "price": "$0.13"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-37", "name": "Fruit 37", "price": "$3.78"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-38", "name": "Fruit 38", "price": "$1.91"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-39", "name": "Fruit 39", "price": "$0.63"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-40", "name": "Fruit 40", "price": "$3.96"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-41", "name": "Fruit 41", "price": "$1.34"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-42", "name": "Fruit 42", "price": "$4.30"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-43", "name": "Fruit 43", "price": "$1.20"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-44", "name": "Fruit 44", "price": "$2.81"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-45", "name": "Fruit 45", "price": "$3.79"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-46", "name": "Fruit 46", "price": "$3.32"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-47", "name": "Fruit 47", "price": "$4.30"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-48", "name": "Fruit 48", "price": "$0.13"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-49", "name": "Fruit 49", "price": "$3.66"}
 (NOBRIDGE) LOG  RENDERING SECTION Vegetables
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-0", "name": "Vegetable 0", "price": "$2.14"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-1", "name": "Vegetable 1", "price": "$4.02"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-2", "name": "Vegetable 2", "price": "$1.36"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-3", "name": "Vegetable 3", "price": "$1.35"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-4", "name": "Vegetable 4", "price": "$4.33"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-5", "name": "Vegetable 5", "price": "$1.82"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-6", "name": "Vegetable 6", "price": "$4.90"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-7", "name": "Vegetable 7", "price": "$3.02"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-8", "name": "Vegetable 8", "price": "$1.79"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-9", "name": "Vegetable 9", "price": "$0.78"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-10", "name": "Vegetable 10", "price": "$0.28"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-11", "name": "Vegetable 11", "price": "$3.23"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-12", "name": "Vegetable 12", "price": "$1.73"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-13", "name": "Vegetable 13", "price": "$4.34"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-14", "name": "Vegetable 14", "price": "$3.28"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-15", "name": "Vegetable 15", "price": "$4.03"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-16", "name": "Vegetable 16", "price": "$4.69"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-17", "name": "Vegetable 17", "price": "$4.05"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-18", "name": "Vegetable 18", "price": "$2.32"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-19", "name": "Vegetable 19", "price": "$0.38"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-20", "name": "Vegetable 20", "price": "$1.44"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-21", "name": "Vegetable 21", "price": "$3.06"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-22", "name": "Vegetable 22", "price": "$4.67"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-23", "name": "Vegetable 23", "price": "$2.10"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-24", "name": "Vegetable 24", "price": "$0.88"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-25", "name": "Vegetable 25", "price": "$2.51"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-26", "name": "Vegetable 26", "price": "$3.97"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-27", "name": "Vegetable 27", "price": "$3.25"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-28", "name": "Vegetable 28", "price": "$2.62"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-29", "name": "Vegetable 29", "price": "$4.50"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-30", "name": "Vegetable 30", "price": "$2.33"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-31", "name": "Vegetable 31", "price": "$4.01"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-32", "name": "Vegetable 32", "price": "$1.44"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-33", "name": "Vegetable 33", "price": "$1.01"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-34", "name": "Vegetable 34", "price": "$3.83"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-35", "name": "Vegetable 35", "price": "$4.89"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-36", "name": "Vegetable 36", "price": "$2.37"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-37", "name": "Vegetable 37", "price": "$3.89"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-38", "name": "Vegetable 38", "price": "$0.08"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-39", "name": "Vegetable 39", "price": "$1.78"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-40", "name": "Vegetable 40", "price": "$3.78"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-41", "name": "Vegetable 41", "price": "$3.30"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-42", "name": "Vegetable 42", "price": "$1.12"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-43", "name": "Vegetable 43", "price": "$0.19"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-44", "name": "Vegetable 44", "price": "$1.06"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-45", "name": "Vegetable 45", "price": "$3.32"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-46", "name": "Vegetable 46", "price": "$1.13"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-47", "name": "Vegetable 47", "price": "$0.68"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-48", "name": "Vegetable 48", "price": "$4.73"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-49", "name": "Vegetable 49", "price": "$0.48"}
 (NOBRIDGE) LOG  RENDERING SECTION Dairy
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "dairy-0", "name": "Dairy 0", "price": "$2.07"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "dairy-1", "name": "Dairy 1", "price": "$1.81"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "dairy-2", "name": "Dairy 2", "price": "$0.21"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "dairy-3", "name": "Dairy 3", "price": "$1.91"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "dairy-4", "name": "Dairy 4", "price": "$3.86"}
 (NOBRIDGE) LOG  RENDERING SECTION Dairy
 (NOBRIDGE) LOG  RENDERING SECTION Dairy
 (NOBRIDGE) LOG  RENDERING SECTION Vegetables
 (NOBRIDGE) LOG  RENDERING SECTION Dairy
 (NOBRIDGE) LOG  RENDERING SECTION Vegetables
 (NOBRIDGE) LOG  RENDERING SECTION Dairy
 (NOBRIDGE) LOG  RENDERING SECTION Fruits
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-0", "name": "Fruit 0", "price": "$2.21"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-1", "name": "Fruit 1", "price": "$0.12"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-2", "name": "Fruit 2", "price": "$0.86"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-3", "name": "Fruit 3", "price": "$3.05"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-4", "name": "Fruit 4", "price": "$2.40"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-5", "name": "Fruit 5", "price": "$2.69"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-6", "name": "Fruit 6", "price": "$4.87"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-7", "name": "Fruit 7", "price": "$4.58"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-8", "name": "Fruit 8", "price": "$3.64"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-9", "name": "Fruit 9", "price": "$2.69"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-10", "name": "Fruit 10", "price": "$3.99"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-11", "name": "Fruit 11", "price": "$1.44"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-12", "name": "Fruit 12", "price": "$3.67"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-13", "name": "Fruit 13", "price": "$3.73"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-14", "name": "Fruit 14", "price": "$4.76"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-15", "name": "Fruit 15", "price": "$1.54"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-16", "name": "Fruit 16", "price": "$1.17"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-17", "name": "Fruit 17", "price": "$4.97"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-18", "name": "Fruit 18", "price": "$2.23"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-19", "name": "Fruit 19", "price": "$4.14"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-20", "name": "Fruit 20", "price": "$3.28"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-21", "name": "Fruit 21", "price": "$2.17"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-22", "name": "Fruit 22", "price": "$4.34"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-23", "name": "Fruit 23", "price": "$4.97"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-24", "name": "Fruit 24", "price": "$4.11"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-25", "name": "Fruit 25", "price": "$3.96"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-26", "name": "Fruit 26", "price": "$4.03"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-27", "name": "Fruit 27", "price": "$0.41"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-28", "name": "Fruit 28", "price": "$1.12"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-29", "name": "Fruit 29", "price": "$3.70"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-30", "name": "Fruit 30", "price": "$1.91"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-31", "name": "Fruit 31", "price": "$2.81"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-32", "name": "Fruit 32", "price": "$4.60"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-33", "name": "Fruit 33", "price": "$2.93"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-34", "name": "Fruit 34", "price": "$2.89"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-35", "name": "Fruit 35", "price": "$1.59"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-36", "name": "Fruit 36", "price": "$0.13"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-37", "name": "Fruit 37", "price": "$3.78"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-38", "name": "Fruit 38", "price": "$1.91"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-39", "name": "Fruit 39", "price": "$0.63"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-40", "name": "Fruit 40", "price": "$3.96"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-41", "name": "Fruit 41", "price": "$1.34"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-42", "name": "Fruit 42", "price": "$4.30"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-43", "name": "Fruit 43", "price": "$1.20"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-44", "name": "Fruit 44", "price": "$2.81"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-45", "name": "Fruit 45", "price": "$3.79"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-46", "name": "Fruit 46", "price": "$3.32"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-47", "name": "Fruit 47", "price": "$4.30"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-48", "name": "Fruit 48", "price": "$0.13"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "fruit-49", "name": "Fruit 49", "price": "$3.66"}
 (NOBRIDGE) LOG  RENDERING SECTION Vegetables
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-0", "name": "Vegetable 0", "price": "$2.14"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-1", "name": "Vegetable 1", "price": "$4.02"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-2", "name": "Vegetable 2", "price": "$1.36"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-3", "name": "Vegetable 3", "price": "$1.35"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-4", "name": "Vegetable 4", "price": "$4.33"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-5", "name": "Vegetable 5", "price": "$1.82"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-6", "name": "Vegetable 6", "price": "$4.90"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-7", "name": "Vegetable 7", "price": "$3.02"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-8", "name": "Vegetable 8", "price": "$1.79"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-9", "name": "Vegetable 9", "price": "$0.78"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-10", "name": "Vegetable 10", "price": "$0.28"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-11", "name": "Vegetable 11", "price": "$3.23"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-12", "name": "Vegetable 12", "price": "$1.73"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-13", "name": "Vegetable 13", "price": "$4.34"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-14", "name": "Vegetable 14", "price": "$3.28"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-15", "name": "Vegetable 15", "price": "$4.03"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-16", "name": "Vegetable 16", "price": "$4.69"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-17", "name": "Vegetable 17", "price": "$4.05"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-18", "name": "Vegetable 18", "price": "$2.32"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-19", "name": "Vegetable 19", "price": "$0.38"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-20", "name": "Vegetable 20", "price": "$1.44"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-21", "name": "Vegetable 21", "price": "$3.06"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-22", "name": "Vegetable 22", "price": "$4.67"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-23", "name": "Vegetable 23", "price": "$2.10"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-24", "name": "Vegetable 24", "price": "$0.88"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-25", "name": "Vegetable 25", "price": "$2.51"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-26", "name": "Vegetable 26", "price": "$3.97"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-27", "name": "Vegetable 27", "price": "$3.25"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-28", "name": "Vegetable 28", "price": "$2.62"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-29", "name": "Vegetable 29", "price": "$4.50"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-30", "name": "Vegetable 30", "price": "$2.33"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-31", "name": "Vegetable 31", "price": "$4.01"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-32", "name": "Vegetable 32", "price": "$1.44"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-33", "name": "Vegetable 33", "price": "$1.01"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-34", "name": "Vegetable 34", "price": "$3.83"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-35", "name": "Vegetable 35", "price": "$4.89"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-36", "name": "Vegetable 36", "price": "$2.37"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-37", "name": "Vegetable 37", "price": "$3.89"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-38", "name": "Vegetable 38", "price": "$0.08"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-39", "name": "Vegetable 39", "price": "$1.78"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-40", "name": "Vegetable 40", "price": "$3.78"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-41", "name": "Vegetable 41", "price": "$3.30"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-42", "name": "Vegetable 42", "price": "$1.12"}
 (NOBRIDGE) LOG  RENERING ITEEEM {"id": "vegetable-43", "name": "Vegetable 43", "price": "$0.19"}

Reproducer

https://snack.expo.dev/7cjOb_kzYa8_8gcuW9i9s

Screenshots and Videos

No response
@shubhamguptadream11 shubhamguptadream11 added Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. and removed Needs: Triage 🔍 labels Dec 18, 2024
@vovka-s
Copy link

vovka-s commented Feb 13, 2025

@shubhamguptadream11
I have the same issue after upgrade to RN 0.76
Any updates?

@toppsdown
Copy link

I'm having the same problem

@ponikar
Copy link
Author

ponikar commented Feb 18, 2025

It seems like both FlatList and SectionList component try to pre-render segments that's why I am seeing the logs for items off the screen.

If you want to avoid that you can use FlashList as an alternative. Moreover you can give a static container height to make sure it doesn't render any extra items off screen.

@vovka-s
Copy link

vovka-s commented Feb 20, 2025

@ponikar
pre-rendering in FlatList and SectionList happens, but in most cases it is not a problem
The problem is that in SectionList rerendering happens on every time when I scroll the list for 3-4 items
And this issue starts only after loading the second page in the handler of onEndReached event

In your example groceryData is not memoised. I think rerendering caused by this.
But if you will try to memoize it via useMemo, the issue comes back after loading the second page

I migrated to the FlashList and now I can confirm that it works perfectly. There are no of discussed problems with it

@ponikar
Copy link
Author

ponikar commented Feb 20, 2025

Thanks for the confirmation. @vovka-s

@toppsdown
Copy link

toppsdown commented Feb 20, 2025 •
edited
Loading

In my case, I was actually seeing the sectionlist & flatlist rendering everything in the data set, even things way outside the window range.

I started from scratch, and copied code in piece by piece to identify what was causing it. Turns out, it was a "gap" style applied to the list items

It seems that if you mess with the size or spacing of flatlist outside of it's allowed props, it loses track of where it is in the list, and decides to render the whole thing.

Replacing the "gap" style with a spacer component fixed the problem. Would be nice if flatlist/sectionList notified you that it's having difficult keeping track of where it is in the list

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component: SectionList Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@toppsdown @vovka-s @react-native-bot @ponikar @shubhamguptadream11