search

petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.25k stars 301 forks source link

[Performance] Header/ footer components are rerendered each time data has changed #407

Closed cryptoethic closed 3 years ago

cryptoethic commented 3 years ago

Hey!

I'm struggling with one more thing.

I have react-virtuoso with infinite loading list. Each time data changes (loading new rows) Header and Footer is rerendered. I have tried with memoized Footer but no luck. Rerenders each time items changes and there is something to rerender.

Any idea how to overcome that issue?

petyosi commented 3 years ago

Can you show what you did in a sandbox?

cryptoethic commented 3 years ago

Hey! Problem solved:

https://codesandbox.io/s/react-virtuoso-reverse-scrolling-header-issue-forked-xwoxp?file=/src/App.js

Using React Component instead of arrow functions makes component not rerender, but I'm unable to pass extra props in that case. Solved this issue by using useCallback

petyosi commented 3 years ago

Yes, that's the correct approach. Components should be memoized, either with useCallback or useMemo.

simplecommerce commented 2 years ago

Hey! Problem solved:

https://codesandbox.io/s/react-virtuoso-reverse-scrolling-header-issue-forked-xwoxp?file=/src/App.js

Using React Component instead of arrow functions makes component not rerender, but I'm unable to pass extra props in that case. Solved this issue by using useCallback

I know this issue is closed but I felt like I should add a comment because I encountered the same issues when trying to apply memoization.

I couldn't figure out how to pass props to the components and finally figured that I had to pass a context props to TableVirtuoso which makes it accessible to some of the components via the context props also.

This wasn't clear in the documentation or didn't have an actual example so I was confused.