useEffect values are loading up on every re-render. Is there anyway to preserve the new changes?

[Kishore180994]

May I know if there is any way to skip re-render the list of functional components whenever the component is added to the view when scrolling and preserve the changes to that component?

For better explanation, consider this sample code example.

https://codesandbox.io/s/restless-thunder-ekkvne?file=/src/App.js

Here is the problem I am facing -

1. Whenever a component is rendered to the view, the useEffect gets called again, which takes care of setting initial values for me. So whenever the component is scrolled again into the view, the useEffect get's called and all the new changes are gone as useEffect is getting called and set's the initial values again.
2. I just like to know if there is any way I can skip this and persist the value that I get from server and skip updating the cache. Will onViewportIndexesChange solve my problem?

[oleggrishechkin]

Hi, @Kishore180994

Your case is really interesting. I didn't think this way.

Sadly, react-viewport-list mount and unmount items automatically, you can't control it. This a type of virtualisation limitations. This is how it works.

In your example you can store item values in parent component, not in item itself.

I changed your example to keep work with react-vitrual-list (maybe it can help): https://codesandbox.io/s/clever-babycat-nfyh9f?file=/src/Item.js

[Kishore180994]

Thanks for the info,

It helps, I can use Redux to store and persist the changes to the list that's been passed to the ViewportList items, in my scenario.

Have to say, the way of your virtualization of the list is really interesting. I like it. Thanks for bringing it up for us.