Merge elements

Benchmark created on


Setup

const state = [
    {
        id: 1,
        text: 'text 1'
    },
    {
        id: 2,
        text: 'text 2'
    },
    {
        id: 3,
        text: 'text 3'
    },
];

const getNewStateForEach = (state, messages) => {
    const messagesToMerge = [];

    messages.forEach((message) => {
        const alreadyInState = state.find((messageInState) => messageInState.id === message.id);

        if (!alreadyInState) {
            messagesToMerge.push(message);
        }
    });

    return [...messagesToMerge, ...state];
}

const getNewStateReduce = (state, messages) => {
    const messagesToMerge = messages.reduce((acc, message) => {
        const alreadyInState = acc.find((messageInState) => messageInState.id === message.id);

        if (!alreadyInState) {
            acc.push(message);
        }

        return acc
    }, state);

    return [...messagesToMerge, ...state];
}

const getNewStateSet = (state, messages) => {
  const idsInState = new Set(state.map((message) => message.id));
  const messagesNotInState = messages.filter((message) => !idsInState.has(message.id));
  return [...messagesNotInState, ...state];
}

Test runner

Ready to run.

Testing in
TestOps/sec
Using forEach
const newState = getNewStateForEach(state, [
    {
        id: 1,
        text: 'text 1'
    },
    {
        id: 4,
        text: 'text 4'
    },
]);
ready
Using reduce
const newState = getNewStateReduce(state, [
    {
        id: 1,
        text: 'text 1'
    },
    {
        id: 4,
        text: 'text 4'
    },
]);
ready
Using Set
const newState = getNewStateSet(state, [
    {
        id: 1,
        text: 'text 1'
    },
    {
        id: 4,
        text: 'text 4'
    },
]);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.