useTransition (list of items)

[RexToCode]

hi there, while using useTransition for a list of items with feature of "add item(s)" and "delete item(s)", which will change the quantity of items in the list. Is there a specific way to avoid re-rendering the whole list when just "adding" or "deleting" item(s) to the list, while the other items are unchanged in their own position.
Perhaps, same question for "filtering" feature, since some items are actually in the same position when some other items are filtered out.

The avoiding of rendering the whole list while "adding" or " deleting" items work for applying useMemo to each item while not putting into the useTransition function.

Hope for advices. Thanks!

[joshuaellis]

no because react needs to remove the elements from it's tree. This would go against declarative coding & against react convention leading to what I imagine to be a crazy amount of bugs. If you're having issues and can share an codesandbox I might be able to offer better advice on what you should do as it feels very vague now.

[RexToCode]

I wrapped the Item component with React.memo to each item so each item doesn’t render unless its props change.
My aim is to use useTransition but items don’t get render when they are not the one being added or removed from the list. Any suggestions? Thanks.

[joshuaellis]

I think this would resolve your issue? https://codesandbox.io/s/hardcore-heisenberg-905ix?file=/src/List.tsx

[RexToCode]

but other items still get render when adding new item to the list, it's shown in the console

perhaps, would it be silly to apply separate transition inside of each item, which should bring bigger burden to the app?
without animation, i could use React.memo, but i really couldn't figure out a way when using react-spring. I am wondering how others handle a big list (which is dynamic in quantity) while modifying it's quantity (adding or deleting item), because for performance sake, i don't think it's ideal to render the whole list of items when just adding (or deleting) item(s) that is/are not in relationship with them....even they are from the same list of object.

[joshuaellis]

I don't think this is spring issue, because it does it with a regular map:

There's a second param to memo that is an equality check although technically you're not supposed to use it to avoid renders otherwise it can lead to bugs. Some people who do massive tables do pagination? I guess my view on it would be to do the component and then look at performance if it's an issue. Personally, I would use useTransition this is what it's made for...

[RexToCode]

Got it. Thanks lots!