React Design Pattern

Question

I have an event component and a container class that lists the events. I am struggling with deciding between these two options

1. Have the container class get the list of event_id, pass the event_id to each event component, and have each event component fetch its own data.

2. Have the container class get the list of events objects, and pass the event object in as a prop to the event component.

The user can edit events, so the event components needs to be able to handle updates.

With option 1, I will only need to make one fetch to the rest api, but then the container class has to manage the state of each event in case of edits.

With option 2, I will have to make a fetch request for each event, but then each event object can manage its own state.

Which option (or any suggested 3rd options) should I implement?

Answer 1

I'm with the first choice ... It's better always to reduce your requests. And in react it's better to make your design such as .. less containers .. more components

I mean that if you can manage all your components in one container this would be a better solution

Another Case .. Maybe you'd have to transfer state or to make interactive between event components .. this would be much harder if you make every component fetch data by itself

So I'm with the first choose

Update:

Will it be displayed with the same event handler ? If yes .. than the other choice will be better

what I mean that: some time you have component with event handler .. but this event will be handled differently in each parent component(like when you have custom button components with some styles .. but one-click event will be handled differently depending on parent component) .. so the first choice will be better

but if it's handling same event in the same way each time then the second choice will be better

Answer 2

Both the approaches are correct, and nothing wrong to go over another. It all depends on how your UI wants to show these events. If data from multiple components (event component and a container class in this case) needs to be in sync, then move state data to closest parent component of the components that need it and handle updates through callback functions. If not, move individual event operation in child(event component in this case) component