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.
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
[WIP] Performance improvements experiments for web #152
Conversation
const Row = (row: { index: number; style: any }) => (
<div style={row.style}>
{renderItem({
item: data[row.index],
index: row.index
})}
</div>
)
const ListComponent = (
<AutoSizer>
{({ width, height }) => (
<DynamicSizeList
height={height}
itemCount={data.length}
itemKey={index => keyExtractor(data[index], index)}
layout={horizontal ? 'horizontal' : 'vertical'}
width={width}
>
{Row}
</DynamicSizeList>
)}
</AutoSizer>
) |
Using But performance is not good (specially on Chrome; a bit better on Firefox). Maybe my row render is expensive or other thing. If you think you can improve, check this: #155 const Row = React.forwardRef<View, { index: number; style: any }>(
(row, ref) => (
<View ref={ref} style={row.style}>
{renderItem({
item: data[row.index],
index: row.index,
})}
</View>
),
) |
0e71cc7
to
039182c
Compare
d804259
to
16b6774
Compare
By using useSpring and InteractionManager.runAfterInteractions #126
Closing in favor of #173. Implemented using |
Work in progress. Help wanted.
bvaughn/react-window#102
bvaughn/react-window#6
How to run
git clone git@github.com:devhubapp/devhub.git
cd devhub
git checkout react-window
yarn
yarn dev:web