Ngrx selector direct or composite

Question

I've got this state

export interface State {
  error: string | null;
  loaded: boolean;
  loading: boolean;
  data: MyDto | undefined;
}

with this selector

export const selectData = createSelector(selectFeature, (state: MyDto) => {
  if (state.data) {
    return state.data;
  }
  return undefined;
});
export const selectError = createSelector(selectFeature, (state: MyDto) => {
  return state.error;
});
export const selectLoaded = createSelector(selectFeature, (state: MyDto) => {
  return state.loading;
});
export const selectLoading = createSelector(selectFeature, (state: MyDto) => {
  return state.loading;
});

to void extra rendering I want to have e single selector what's the best way and why

Direct

export const selectVm = createSelector(selectFeature, (state: MyDto) => {
  return state;
});

or

export const selectVm = createSelector(
  selectError,
  selectLoaded,
  selectLoading,
  selectData
  (error, loaded, loading, data) => {
    return {
      error,
      loaded, 
      loading,
      data
    };
  }
);