CODEWITHSUNDEEP
reactjslistreduxrendering
Stefdelec
Stefdelec

Reputation: 2811

How to avoid re mounting react comp item of a list when list size change?

I have a list of item. Data are stored in redux. Each item does fetch data (http call), on item component did mount. In each item I can delete this item.

My problem is when I delete one item, the list re render (because size change), re mounting each item, making each item do a new http call.

Is there any way to prevent re mounting ?

Upvotes: 0

Views: 1248

Answers (3)

ideano1
ideano1

Reputation: 150

For your Usecase, KEYS are the best feature from REACT which you can relay upon.

Ref this :

https://reactjs.org/docs/reconciliation.html#keys

https://reactjs.org/docs/lists-and-keys.html#keys

Upvotes: 0

Will Jenkins
Will Jenkins

Reputation: 9787

You shouldn't need to use React.Memo or React.PureComponent for this. Components shouldn't get unmounted when they're in a list that other items are removed from, if that's happening it suggests that your problem lies in the way your list is managed and updated.

Here's a quick code sandbox that demonstrates this - I've added a console.log to componentDidMount for each item, if you open the console you can see that it only gets called once by each item on start-up. When you remove items, the others stay mounted.

Upvotes: 3

Dupocas
Dupocas

Reputation: 21317

Use React.Memo or React.PureComponent to perform a shallow comparison in child's props and only re-render when props actually changes

Upvotes: 1

Related Questions