Root component updates trigger list remount

[pasiba]

Is it expected behaviour?

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

[bvaughn]

This doesn't look like a "remount" – just a re-render of the <div>s. 😄

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

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:

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:

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

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.

[bvaughn]

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

[pasiba]

Thank you for explaining. I really appreciate it 😄