Best practice to send object array to component in React?

Question

In React, suppose you have a component that is going to display a list.

Which is the more React/Redux compliant method for passing the list to the component?

Pass an array of objects
Pass an array of keys only, plus a map (dictionary) to look up the object

e.g.:

<ListComponent data={objectArray} />

vs.

<ListComponent keyArray={keyArray} dictionary={mapOfKeyToObject} />

Please consider performance, reusability, accepted conventions and testing.

thanks

EDIT: To clarify, I mean keys as in ID fields of the objects (not talking about the keys that React uses for identifying in rendering).

The question is related to [https://redux.js.org/basics/reducers#note-on-relationships]:

In a more complex app, you're going to want different entities to reference each other. We suggest that you keep your state as normalized as possible, without any nesting. Keep every entity in an object stored with an ID as a key, and use IDs to reference it from other entities, or lists. ... For example, keeping todosById: { id -> todo } and todos: array inside the state would be a better idea in a real app.

So is it better then to pass that dictionary to the component (e.g. todosById) plus a second array with just the keys/IDs to display vs. have a subset array that's just the objects?

Consider that those objects might be getting updated by other components.

I don't really understand the question. If you need an array, pass an array. I don't see any benefit of passing an object, which already has the keys, and an additional array of those keys. Ultimately it'll depend on how exactly you need to use the data. If you mean "keys" as in the keys React wants for rendering, I don't see any compelling reason to pre-generate them--that doesn't mean there aren't any compelling reason (like if it's hugely expensive or something?) but I've never seen that IRL. — Dave Newton
– Dave Newton, Commented Sep 16, 2019 at 14:17

demkovych · Accepted Answer · 2019-09-16 14:17:12Z

1

The first one is a correct way to put object array. Instead of 2 properties you send only one.

answered Sep 16, 2019 at 14:17

demkovych

9,0453 gold badges23 silver badges27 bronze badges

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

Comments

Joseph D. · Accepted Answer · 2019-09-16 14:17:54Z

1

Refer to List and Keys.

Simply it's just:

function ListComponent(props) {
  const listItems = props.items.map((item) => // iterate over items array prop
    <ListItem key={item.key} value={item.value} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const itemsArray = [...];
<ListComponent items={itemsArray} /> // pass array as prop

answered Sep 16, 2019 at 14:17

Joseph D.

12.2k4 gold badges40 silver badges72 bronze badges

Comments

Pranavan Maru · Accepted Answer · 2019-09-16 14:35:25Z

0

If the keyArray isn't a prop that will be used by ListComponent, then it's just an overkill if you follow the second approach. First approach will be better suited if you implement the ListComponent to map through the array passed down as a prop. Array.prototype.map function out of the box supports a key param and therefore you don't need to pass an extra key array for just display purposes, unless they are something the front end logic depends on.

answered Sep 16, 2019 at 14:35

Pranavan Maru

4915 silver badges10 bronze badges

Collectives™ on Stack Overflow

Best practice to send object array to component in React?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related