Render a dynamic list in React

Question

I have an array of books in my redux store.

My reactjs component iterate over this like so (books.map=>(book=>{...renderbook})) to render the book.

So far so good.

Now when a new element is added to the books the entire list is being re-rendered. Is there a way in which this can be avoided? I believe 'ListView' does something similar in React-Native. Is there an equivalent in React-JS?

Sure books.map(book => <Book>).

dfsq
– dfsq

2018-07-30 11:50:30 +00:00
Commented Jul 30, 2018 at 11:50 — dfsq
– dfsq, Commented Jul 30, 2018 at 11:50
use keys reactjs.org/docs/lists-and-keys.html#keys

imjared
– imjared

2018-07-30 11:51:37 +00:00
Commented Jul 30, 2018 at 11:51 — imjared
– imjared, Commented Jul 30, 2018 at 11:51

Blue · Accepted Answer · 2018-07-30 11:51:24Z

4

You need to specify the key property for each book:

books.map(book => <Book key={book.id} />);

If a book with an ID hasn't changed, they will not be re-rendered.

For more information on this, see: https://reactjs.org/docs/lists-and-keys.html

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

More info here as well: https://reactjs.org/docs/reconciliation.html#recursing-on-children

answered Jul 30, 2018 at 11:51

Blue

23k7 gold badges69 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Blue Over a year ago

@Aditya Your edit actually goes expressly against the docs:

We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state.

Singh Over a year ago

Ohh! I didn't knew that. Thank you for explaining, makes sense. What if there isn't any unique identifier?

Blue Over a year ago

Then you should attach one, or create one based on unique elements in the object (Like book.title+book.description)

Collectives™ on Stack Overflow

Render a dynamic list in React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related