When is it better to call an API to update a component or just change its state by it's reducer?

I have two components,in the first one i have an array of objects I get by calling the API (in y useEffect, only if the array in the store is empty, to avoid unnecessary calls). In the second one, the same array but with buttons to call the API and DELETE or POST a new object to that array in the server. My question is, is it better to create 2 actions in my second component's actions, for making the api updates, and then filter or push that object in my first component's reducer? Or just make the first component to always call the API and update itself? I don't know if it's better to update the store as mutch as u can without relying on an API call or just an API call for updating will be more smooth.