List view still has performance issues

jaygarcia commented 9 years ago

A list view with the following parameters:

<ListView dataSource={this.state.dataSource} initialListSize={20} scrollRenderAheadDistance={500} renderRow={this._renderRow}/>

Still exhibits the "Catching up" behavior. This will become a roadblock for many developers who will look to leverage the list view.

https://www.youtube.com/watch?v=loSEadwGuTg

renderRow is relatively minimalistic:

        _renderRow: function(rowData, sectionID, rowID) {

            var record    = this.rowData[rowID],
                isDir     = (record.type == 'dir'),
                prefix    = null,
                wpSuffix  = null,
                imgSuffix = null,
                folder    = '\uE805',
                vgmIcon   = '\uE80A';
                // wikiIcon  = '\uE808',
                // picIcon   = '\uE809';

            if (isDir) {
                prefix = <Text style={styles.rowPrefix}>{folder}</Text> ;
            }
            else {

                prefix = <Text style={styles.rowPrefix}>{vgmIcon}</Text>;

            }

            return (
                <TouchableHighlight onPress={() => this._pressRow(rowID)}>
                    <View>
                        <View style={styles.row}>
                            {prefix}

                            <Text style={styles.rowText}>{rowData}</Text>

                            {wpSuffix}
                            {imgSuffix}
                        </View>
                        <View style={styles.separator} />
                    </View>
                </TouchableHighlight>
            );
        },

There are only 195 items in the list:

!Others
2000AD
AAOCG
ACME
ADMINCRACK
AGAiN
AGES
AGGRESSiON
AH-Team
AHCU
ASA
ASSiGN
AT4RE
AURA
Ackerlight
AiR
AkEd
Anthrox
AoRE
ArCADE
Autopsy_Guy
BACKLASH
BAKA!
BBB
BLiZZARD
BRD
BReWErS
BetaMaster
Black Monks
Black_X
Braga Software
CBR
CFF
CHAOS!
CLASS
CORE
CRUDE
Cerberus
CiM
DBH
DECADE
DEFJAM
DELiGHT
DEViANCE
DJiNN
DOC
DOT.EXE
DTCG
DVT
DYNAMiCS140685
DiGERATi
DiSTiNCT
DiViNE
DimitarSerg
Dr.XJ
Drag Team
Dual Crew
ECLiPSE
EDGE
EMBRACE
ENGiNE
EPSiLON
EXPLOSiON
EXTALiA
EiTheL
F4CG
FAiRLiGHT
FFF
FLG
FOFF
FiRELiGHT
GEAR
GGHZ
GZKS
GradenT
H2O
HAZE
HELLFiRE
HERiTAGE
HOODLUM
HYBRiD
HoG
ICU
IRAQ ATT
IREC
J@CK@L
JMP
JUNLAJUBALAM
KaOs
KaSS
Kindly
KpTeam
LEGEND
LSD
LUCiD
LnDL
Lz0
MAZE
MESMERiZE
METROiD
MODE7
MP2K
MTCT
MYTH
MiRACLE
NAPALM
NoPE
ORACLE
ORiGiN
ORiON
OUTLAWS
PANiCDOX
PARADOX
PARADiGM
PCSEVEN
PHROZEN CREW
PSC
PiZZA
Postmortem
QUARTEX
R2R
RECOiL
RED
REPT
RESURRECTiON
REVENGE
RNDD
ROGUE
RU-BOARD
Razor1911
Red Hot
Reloaded
RiTUEL
S.T.A.R.S
SCOOPEX
SDV
SERGANT
SHWZ
SKiD ROW
SST
STATiC
SUPPLEX
SZOPKA
ScoRPioN2
SlipStream
SnD
Solitary
T3
TECHNIC
TFT
THETA
THRUST
TLC
TLG
TMG
TPoDT
TRSi
TSRh
TWK
Team X
The Company
UNLEASHED
UP7
Under SEH
UnderPL
VENOM
VORONEZH
ViRiLiTY
WDYL-WTN
X.O
XOR37H
YouKing
ZENiTH
ZWT
dEViATED
h4x0r
h4xx0r
hezz
iCWT
iNDUCT
iNFLUENCE
iOTA
iRC
iRRM
ismail
kZ
l0wb1t
live_4_ever
nGen
pHrOzEn HeLL
rex922
s0m
tPORt
tRUE
uCF

LeezQ commented 9 years ago

maybe you should set pageSize property in your listview,

<ListView 
    dataSource={this.state.dataSource} 
    initialListSize={20} 
    scrollRenderAheadDistance={500} 
    renderRow={this._renderRow}
    pageSize={10}
/>

jaygarcia commented 9 years ago

@LeezQ

Awesome

LeezQ commented 9 years ago

:smile:

facebook / react-native

List view still has performance issues #812