There's no one real answer, the only valid answer is It depends^TM.

Though there are different use-cases that requires different solutions. It all boils down to how the data is going to be used.

A single array of objects

Best used when the order matters and when it's likely rendered as a whole list, where each item is passed from the list looping directly and where items are rarely accessed individually.

This is the quickest (least developer-time consuming) way of storing received data, if the data is already using this structure to begin with, which is often the case.

Pros of array state

• Items order can be tracked easily,
• Easy looping, where the individual items are passed down from the list.
• It's often the original structure returned from API endpoints,

Cons of an array state

• Updating an item would trigger a render of the full list.
• Needs a little more code to find/edit individual items.

A single object by id

Best used when the order doesn't matter, and it's mostly used to render individual items, like on an edit item page. It's a step in the direction of a normalized state, explained in the next section.

Pros of an object state

• Quick and easy to access/update by id

Cons of an object state

• Can't re-order items easily
• Looping requires an extra step (e.g. Object.keys().map)
• Updating an item would trigger a render of the full list,
• Likely needs to be parsed into the target state object structure

Normalized state

Implemented using both an object of all items by id, and an array of all the id strings.

{
  items: {
    byId: { /**/ },
    allIds: ['abc123', 'zxy456', /* etc. */],
  }
}

This becomes necessary when:

• all use-cases are equally likely,
• performance is a concern (e.g. huge list),
• The data is nested a lot and/or duplicated at different levels,
• re-rendering the list as undesirable side-effects

An example of an undesirable side-effect: updating an item, which triggers a full list re-render, could lose a modal open/close state.

Pros

• Items order can be tracked,
• Referencing individual items is quick,
• Updating an item:
  • Requires minimal code
  • Doesn't trigger a full list render since the full list loops over allIds strings,
• Changing the order is quick and clear, with minimal rendering,
• Adding an item is simple but requires adding it in both dataset
• Avoids duplicated objects in nested data structures

Cons

• Individual removal is the worse case scenario, while not a huge deal either.
• A little more code needed to manage the state overall.
• Might be confusing to keep both state dataset in sync.

This approach is a common normalization process used in a lot of places, here's additional references:

• Redux's state normalization is a strongly recommended best practice,
• The normalizr lib.