TheBott

let filtered = arrWithObj.filter(x => !arr.includes(x.id));

Но если важна совместимость с IE ниже 9 версии, то лучше перебором

const result = [];
for (const n of arrWithObj) {
  if (!arr.includes(n.id)) {
    result.push(n);
  }
}

или

const result = arrWithObj.filter(function(n) {
  return !this.has(n.id);
}, new Set(arr));

или

const result = (function get(i, n = arrWithObj[i]) {
  return n
    ? [].concat(~arr.indexOf(n.id) ? [] : n, get(-~i))
    : [];
})(0);

или

const result = Object.values(arr.reduce(
  (acc, n) => (delete acc[n], acc),
  Object.fromEntries(arrWithObj.map(n => [ n.id, n ]))
));

или

const result = Array.from(arr.reduce(
  (acc, n) => (acc.delete(n), acc),
  new Map(arrWithObj.map(n => [ n.id, n ]))
).values());

никак, сначала придется отфильтровать массив
на быструю руку так, если там не миллиард элементов, то прокатит по производительности

ar = [{id: 2},{id: 23},{id: 21},{id: 244},{id: 21},{id: 2},{id: 22},{id: 23}]

const uniqIds = new Set(ar.map(a => a.id));

[...uniqIds]
  .map(id => ar.find(a => id === a.id))
  .map(el => <Component data={el} />)

const array = [
    {
        name: 'Jonh',
        age: 32
    }, {
        name: 'James',
        age: 33
    }, {
        name: 'Jacob',
        age: 33
    }
];

const key = 'age';
const values = new Set();

const filtredArray = array.filter(item => {
    const value = item[key];
    if (!values.has(value)) {
        values.add(value);
        return true;
    }
    return false;
});

.block:last-child{
margin: 0 auto;
}

https://developer.mozilla.org/en-US/docs/Web/API/H...