I think the problem is that the first argument passed to reduce isn't wrapped in a proxy. e.g.:

reactive([{ a: 1 }, { b: 2 }]).reduce((c, d) => {
  console.log(c, d)
})

d is wrapped in a proxy, but c isn't.

• Playground

No initial value is being passed to reduce here, so the unwrapped first item in the array is treated as the initial value.

Your error is caused by how the reduce function is used.

"The first time that the callback is run there is no "return value of the previous calculation". If supplied, an initial value may be used in its place. Otherwise the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0)."

More can be found here.

If you don't want your program to skip the first execution, you must pass the optional initialValue as the second argument to your reduce function. Assuming that your values will be only positive integers, { "value": 0 } will be ideal as the initialValue argument.

const maxBy = (arr, iteratee) => {
return arr.reduce((maxItem, currentItem) => {
const cur = iteratee(currentItem);
return cur > maxItem ? cur : maxItem;
}, Number.MIN_VALUE);
};

It is indeed working by passing the first item as initial value optional parameter!

Reactivity is working fine after fixing it. Thank you for your answers <3