Comments (3)
I have updated the docs to remove inline rendering functions! Hopefully this will avoid confusion in the future. π
from react-window.
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.
from react-window.
Thank you for explaining. I really appreciate it π
from react-window.
Related Issues (20)
- Can I replace the blank spaces which is caused by scrolling fast with other components?
- Remove nodes in pairs to avoid zebra stripe flashing HOT 1
- Need access to current scroll offset to avoid two lists scrolling each other exceed maximum rerender depth. HOT 1
- Scroll synchronization of List and Grid lagging HOT 2
- Why is the onscroll method triggered when the page is first rendered HOT 1
- Styling are not added properly in Table body
- Add "behavior" option for scroll methods
- VariableSizeGrid has issue when row count over 1000
- Section Header
- Deteriorated performance on lists exceeding 1000 elements
- Can't use react-window in vite react-ts HOT 1
- innerElementType doesn't work
- Input is losing focus , when wrapped with VariableSizeList HOT 2
- when i use "WindowScroller", why the page is constantly refreshing?
- Shifting all items in a list
- Loading indicator while it loads all 1m rows HOT 1
- onClick inside <List /> element doesn't work HOT 1
- Blanks appear on fast scrolling in react 18 use createRoot HOT 2
- add new item error when use VariableSizeList
- Allow canceling scroll
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-window.