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.

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

Closed
wants to merge 6 commits into from

Conversation

brunolemos
Copy link
Member

@brunolemos brunolemos commented Jun 26, 2019

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

@brunolemos
Copy link
Member Author

brunolemos commented Jun 26, 2019

I haven't succeeded using DynamicSizeList yet.

As you can see, it seems all items are being positioned on top of each other:

image

image

image

The code is this from the PR. (trying to share the same api with FlatList).

If you have any input please let me know.

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>
    )

@brunolemos
Copy link
Member Author

brunolemos commented Jun 26, 2019

Using React.forwardRef fixed the positioning issue above.

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>
      ),
    )

image

@brunolemos brunolemos changed the title [Web] Use react-window to virtualize lists [Challenge] Improve performance of big lists Jun 26, 2019
@brunolemos brunolemos changed the title [Challenge] Improve performance of big lists [Web] Use react-window Jun 27, 2019
@brunolemos brunolemos added performance and removed UX labels Jun 29, 2019
@brunolemos brunolemos force-pushed the react-window branch 2 times, most recently from 0e71cc7 to 039182c Compare July 3, 2019 21:13
@brunolemos brunolemos changed the title [Web] Use react-window [Web] Enable list virtualization to increase performance Jul 5, 2019
@brunolemos brunolemos changed the title [Web] Enable list virtualization to increase performance [WIP] Performance improvements experiments for web Jul 7, 2019
@brunolemos brunolemos force-pushed the master branch 2 times, most recently from d804259 to 16b6774 Compare July 11, 2019 06:01
@brunolemos brunolemos moved this from To do to In progress in DevHub Aug 21, 2019
@brunolemos
Copy link
Member Author

Closing in favor of #173. Implemented using VariableSizeList instead of DynamicSizeList.

@brunolemos brunolemos closed this Aug 27, 2019
DevHub automation moved this from In progress to Done Aug 27, 2019
@brunolemos brunolemos deleted the react-window branch September 19, 2019 01:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
DevHub
  
Done
Development

Successfully merging this pull request may close these issues.

None yet

1 participant