React-window: Root component updates trigger list remount

Created on 18 Sep 2018  路  3Comments  路  Source: bvaughn/react-window

Is it expected behaviour?

preview

https://codesandbox.io/s/521oq1v574

馃挰 question

Most helpful comment

I have updated the docs to remove inline rendering functions! Hopefully this will avoid confusion in the future. 馃槄

All 3 comments

This doesn't look like a "remount" 鈥撀爅ust a re-render of the <div>s. 馃槃

Let's use the React profiler to take a look at your sandbox:
sandbox1

The profiler shows us that each time the app re-renders, all of the list items re-render. This is because the list items are inline function components that get recreated each time your app renders:
screen shot 2018-09-18 at 7 36 23 am

This means that React will see them as a _new type_ each time it renders, and so it will re-render them too.

Try moving the list item renders outside of your App render method, like so:
screen shot 2018-09-18 at 7 39 11 am
screen shot 2018-09-18 at 7 41 29 am

Now let's use the profiler to look at this forked sandbox where I did just that:
sandbox-2

The profiler shows us now that only your App component is re-rendering when you call forceUpdate()

Here's the source code for the forked sandbox:
https://codesandbox.io/s/n9z6lr0m2m

Maybe I should update the docs to avoid showing inline render methods. I tried to keep the docs brief so that they could be read easily but I can see how they might be misleading currently.

I have updated the docs to remove inline rendering functions! Hopefully this will avoid confusion in the future. 馃槄

Thank you for explaining. I really appreciate it 馃槃

Was this page helpful?
0 / 5 - 0 ratings