Angular CRUD – Refresh UI after add/update/delete operation

I was wondering that it is better to refresh the UI when executing an add/update/delete operation from a CRUD in Angular.

The options are as follows (for example, for delete action):

1. Update local variable with previously fetched data after perform the action.

deleteProduct(id) {
    this.productsService.deleteProduct(id).subscribe(status => {
        this.products = this.products.filter(item => item.id != id);
    });
}

2. Fetch the items again calling REST API.

deleteProduct(id) {
    this.productsService.deleteProduct(id).subscribe(status => {
        this.getProducts();
    });
}

getProducts() {
    this.productsService.getProducts().subscribe(products => {
        this.products = products;
    });
}

This would also be applicable to add or edit, with more code obviously.

Which option is better in terms of good practices and performance? Updating variable data locally or performing a new http request to obtain updated data.

Source: New feed
Source Url Angular CRUD – Refresh UI after add/update/delete operation